Script element not working inside JQuery .append()

I am using this loop in Javascript:

$.get('showplaylist.php', {playlist: "inbox"}, function(data){

        for (var i = 0; i < data.length + 1; i++)
        {

            var key = i;

            var id = data[key]['id'];

            var youtubeid = data[key]['youtube_id'];

            videoThumb(id, youtubeid);

        }
        }, "json");

});

The function I am looping through unpacks id and youtubeid and appends html output for each line. e.g.

function videoThumb(id, youtubeid)

$('#videos').append(

        "<ul id=\"sortable\">" +
            "<li id='item_" + id + "' class=\"ui-state-default\">" +
                "<div class=\"thumb\" id=\"" + id + "\">" +
                    "<img src=\"http://i3.ytimg.com/vi/" + youtubeid + "/default.jpg\">" +
                "</div>" +
            "</li>" +
        "</ul>"

        );
}

}

The problem is the "sortable" element. I am using JQuery UI sortable plugin. When I generate the html with PHP (without using Javascript) the sortable plugin works. Generating the html through the above function means that it doesn't.

The sortable plugin is defined like this:

    <script>
$(function() {
    $( "#sortable" ).sortable({
    placeholder: 'ui-state-highlight',
            stop: function(i) {
            placeholder: 'ui-state-highlight'
            $.ajax({
                type: "GET",
                url: "updatedb.php",
                data: $("开发者_JS百科#sortable").sortable("serialize")});
            }
    });
    $( "#sortable" ).disableSelection();
});
</script>

Any ideas about how to fix would be appreciated.

---

You have incorrect id. All your appended elements have the same id:

$('#videos').append(

    "<ul id=\"sortable\">"

Or you just appending to incorrect element. I think, the code should be:

$('#sortable').append(
    "<li id='item_" + id + "' class=\"ui-state-default\">" +
        "<div class=\"thumb\" id=\"" + id + "\">" +
            "<img src=\"http://i3.ytimg.com/vi/" + youtubeid + "/default.jpg\">" +
        "</div>" +
    "</li>"
);

Your code gives incorrect html structure:

<!-- video 1-->
<ul id='sortable'>
    <li><img/></li>
</ul>
<!-- video 2-->
<ul id='sortable'>
    <li><img/></li>
</ul>

But correct html should look like this:

<ul id='sortable'>

    <!-- video 1-->
    <li><img/></li>

    <!-- video 1-->
    <li><img/></li>

</ul>