javascript - jQuery UI sortable plus showing the ID and value -

i have list of items using sortable jquery.and each item has value (first,second,third) , each vaue id (1,2,3)

i want when user moves first position third, id of first should 3 , of third should 1. , want id displayed next value

example:

• first-1
• second-2
• third-3

..after changing position:

• third-1
• second-2
• first-3

---

this javascript

$(function () {     $('#sortable').sortable({         //to prevent items moving around when draging         containment: "parent",         start: function (event, ui) {             // initial position(index) of item             var start_pos = ui.item.index();             ui.item.data('start_pos', start_pos);          },          update: function (event, ui) {             var index = ui.item.index();             var start_pos = ui.item.data('start_pos');              //update html of moved item current index             $('#sortable li:nth-child(' + (index + 1) + ')').appendto(index);              if (start_pos < index) {                 //update items before re-ordered item                 (var = index; > 0; i--) {                     $('#sortable li:nth-child(' + + ')').appendto(i - 1);                 }             } else {                 //update items after re-ordered item                 (var = index + 2; <= $("#sortable li").length; i++) {                     $('#sortable li:nth-child(' + + ')').appendto(i - 1);                  }             }         },         axis: 'y'     }); }); 

and html:

<div class="container">     <ul id="sortable" class="ui-sortable">         <li id="sort_1" class="ui-state-default">first -</li>         <li id="sort_2" class="ui-state-default">second -</li>         <li id="sort_3" class="ui-state-default">third -</li>         <li id="sort_4" class="ui-state-default">fourth -</li>         <li id="sort_5" class="ui-state-default">fifth -</li>     </ul> </div>