javascript - Move a list item from left to right or right to left updating data-attribute -

this in reference of question "reorder list elements - jquery?" asked here

now want move little further. wanting do, wanting build comparison product items ecommerce.

so, here find reordering list item. want add 2 button in each list item named "left" , "right", though here have shown 1 i.e "right". on clicking the "right" button "data-sortby" value update +1 , list move right i.e. in next position , next positioned list item reorder it's previous position. in short side side movement of li items.

so html below:[just added buttons]

<ul id="ulname"> <li data-sortby="1">three <a href="javascript:;" class="rgth" >right</a></li> <li data-sortby="2">one<a href="javascript:;" class="rgth" >right</a> </li> <li data-sortby="3">two<a href="javascript:;" class="rgth" >right</a> </li> <li data-sortby="4">four<a href="javascript:;" class="rgth" >right</a> </li> 

and script is:

$(document).ready(function() {  var ul = $('ul#ulname'),     li = ul.children('li');       li.detach().sort(function(a,b) {         return $(a).data('sortby') - $(b).data('sortby');       });       ul.append(li);     $('.rgth').each(function(){           var thisli = $(this);           var parent = thisli.parent('li');           var right =  parent.data('sortby') + 1;           var left = parent.data('sortby') - 1;           thisli.click(function(){           //alert(parent.data('sortby')+1);          alert(right);          alert(left);           parent.data('sortby', right);          parent.next().data('sortby',left);          });     });  });  

but find "data-" attribute not updating. can please me going wrong?

i have edited code. giving alert of data attribute values see not changing. know doing silly mess. can please help? here fiddle

i changed code , achieved result searching for. final code:

$('.down').click(function(){             var cur = $(this).parent(),                 next= $(this).parent().next();                   if(next.length > 0 )    {                                  var movedown = (cur.offset().left + cur.outerwidth()) - (next.offset().left + next.outerwidth()),                      moveup = (next.offset().left + next.outerwidth()) - (cur.offset().left + cur.outerwidth());                          cur.css('position', 'relative');                         cur.animate({'left':-movedown});                          next.css('position', 'relative');                         next.animate({'left':-moveup},function(){                                 cur.detach().insertafter(next);                                 next.detach().insertbefore(cur);                               cur.css({'position': 'static', 'top': 0});                              next.css({'position': 'static', 'top': 0});                          });                   }                         //cur.detach().insertafter(next);                         //next.detach().insertbefore(cur);            });          $('.up').click(function(){             var cur = $(this).parent(),                 prev= $(this).parent().prev();               if(prev.length > 0) {                             var moveup = (cur.offset().left + cur.outerwidth()) - (prev.offset().left + prev.outerwidth()),                 movedown = (prev.offset().left + prev.outerwidth()) - (cur.offset().left + cur.outerwidth());                         cur.css('position', 'relative');                         cur.animate({'left':movedown});                          prev.css('position', 'relative');                         prev.animate({'left':moveup},function(){                                 cur.detach().insertbefore(prev);                                 prev.detach().insertafter(cur);                               cur.css({'position': 'relative', 'left': 0});                              prev.css({'position': 'relative', 'left': 0});                          });                 }         });