Question

With a lot of help from stackoverflow users I wrote a script that works like in the demo below:

DEMO

The problem is to populate the ul#selected_items with the data from h2 in consecutive order when the page loads. As you can see now the ul#selected_items are inscribed manualy and I need them to be populated dynamicaly on pageload.
I’m quite new to jQuery and been trying to figure this one out for a while now with no results. We’ll appreciate any help.

Answer 1

You want to create the lis dynamically on page load?
Then remove them from the ul in your html and add this javascript:

$(document).ready(function() {
    $('.holder h2').each(function() {
        $('#selected_items').append('<li selected-item="' + $(this).parent().attr('id') + '_selected">' + $(this).text() + '</li>');
    });
});

Also see your updated example.