Jquery sortable not giving current sorted positions

Jquery sortable not giving current sorted positions

I am using jquery sortable lib. The problem I am having is that  $(this).sortable('serialize')  not giving the current item position after sorting it in UI. Can anyone look into this jsbin example  and help me to figure out what is wrong?

HTML

  1.  <div class="wrapper">
  2.     <p id="foo_1"><div><span>foo</span>1000</div></p>
  3.     <p id="foo_2"><div><span>foo</span>2000</div></p>
  4.     <p id="foo_3"><div><span>foo</span>3000</div></p>
  5.     <p id="foo_4"><div><span>foo</span>5000</div></p>
  6.   </div

JS

  1. $(function() {
  2.   $(".wrapper").sortable({
  3.     update: function(e, ui) {
  4.       console.log($(this).sortable('serialize'));
  5.       console.log($(this).sortable( "toArray" ));
  6.     }
  7.   });
  8. });

Whatever way I arrange the UI, I get always "foo[]=1&foo[]=2&foo[]=3&foo[]=4" .