Jquery Mobile get first value of xml file

I seem to have a very basic issue with Jquery Mobile. I have the following XML code :

<projects>
    <project>
        <pTitle>2</pTitle>
        <pDescription>Un project test 2</pDescription>
        <pPicture>img/icon/bin_opened.png</pPicture>
        <pModel>Modèle de project 2</pModel>
        <pInfo1>project 2 - Info 1</pInfo1>
        <pInfo2>project 2 - Info 2</pInfo2>
    </project>
    <project>
        <pTitle>3</pTitle>
        <pDescription>Un project test 3</pDescription>
        <pPicture>img/icon/file.png</pPicture>
        <pModel>Modèle de project 3</pModel>
        <pInfo1>project 3 - Info 1</pInfo1>
        <pInfo2>project 3 - Info 2</pInfo2>
    </project>
    <project>
        <pTitle>project 4</pTitle>
        <pDescription>Un project test 4</pDescription>
        <pPicture>img/icon/network.png</pPicture>
        <pModel>Modèle de project 4</pModel>
        <pInfo1>project 4 - Info 1</pInfo1>
        <pInfo2>project 4 - Info 2</pInfo2>
    </project>
</projects>

Basically, I want to get the value of the project pictures. I use the following JS script :

$(document).on('pagebeforeshow', '#projets', function()
    {
        $.ajax(
        {
            type: "GET",
            url: "projects.xml",
            dataType: "xml",
            success: function(xml)
            {
                var html = "";
                html += "<div class='ui-grid-b'>";
                html += "<div class='ui-block-a' id='block_a'>"
                html += "<ul data-role='listview' data-split-icon='star' data-split-theme='a' class='listview' id='daViewList'>"

                $(xml).find("project").each(function()
                {
                    html += "<li id='grid_li'>"
                    html += "<a href='simulations.html'>";
                    html += "<img id='project_thumbnail' src='http://ift.tt/XfHYN5' />";
                    html += "<h3 class='noWrap'>" + $(this).find('pTitle').text() + "</h3>";
                    html += "<p class='noWrap'>" + $(this).find('pModel').text() + "</p>";
                    html += "<p class='noWrap'>" + $(this).find('pDescription').text() + "</p></a>";

                    html += "<a href='simulations.html' data-transition='slide' data-icon='arrow-r' data-theme='c'></a>";
                    html += "</li>";
                });

                html += "</ul>";
                html += "</div>";
                html += "</div>";
                $(html).appendTo('#liste');
                $("#project_thumbnail").attr('src', $(xml).find("project").find('pModel').text());
                $("#daViewList").listview().listview("refresh");

                alert($(xml).find("project").find('pPicture').text());
            }
        });
    });

This code does not work when I try to change the img src with the XML value at line

 $("#project_thumbnail").attr('src', $(xml).find("project").find('pModel').text());
                    $("#daViewList").listview().listview("refresh");

With an alert, I saw that this command returns the concatenated values of all the pictures (i.e img/icon/bin_opened.pngimg/icon/file.pngimg/icon/network.png).

alert($(xml).find("project").find('pPicture').text());

Since it is in a loop, I want to change all the img src by the XML values of the good node. How can I do that ?