How do I swap ID's using jQuery UI (Sortable)?

Question

From what I understand, when you use jQuery Sortable the actual list items (li) are rearranged in the HTML code. What I'd like to do is create the illusion of sorting but just move the image names around (perhaps this might take swapping ID's). I've setup a Fiddle to illustrate my example (in this example, the list items are sortable but the ID's and selected items go with it, I want these to keep their order):

JS Fiddle: http://jsfiddle.net/7QFB7/

What is the best way to keep everything in the same order, minus the image names? I need the ID's of the list items and select boxes changed as well as the names of the inputs so that even if they are rearranged the only items that will technically move are the image names. So the end result could look something like this:

    <li id="thumb-1"><select id="image1"></select><input name="image1_path" value="imagename3.jpg"></li>

Notice that in the above line of code all the names and id's have a 1, but the image name has the 3. This is what I'm trying to achieve.

Thank you.

Answer 1

Could be done like this:

DEMO

stop: function (event, ui) {
        ui.item.removeClass('dragging');
        $(this).find('li').each(function(i){
            var index = i+1,
                select =  $(this).find('select')[0];
           select.id = "image"+index;
            select.value = index;
        });
    }