jquery sortable, update ordering field

I am trying to use jquery sortable and when an item is moved, it then updates the hidden ordering field? Has anyone done this before? I've tried a few different things but it's not passing through the current order of the item.

Here's my code:

jQuery(document).ready(function() { 
  jQuery(".sortable").sortable({ 
    opacity: 0.6, 
    cursor: 'move',
    update: function(event, ui) {
      var ordering = $(this).sortable('toArray').toString();
      alert(ordering);
    }
  });
}); 

And here's the sortable part of my table:

<tbo开发者_运维知识库dy class="sortable ui-sortable">
  <tr>
    <td width="5" align="center" class="cols sort">&nbsp;</td>
    <td align="left"><a onclick="getUsrInfo(1)" class="__productTBLink"><strong>Leanne Seawright</strong>, Web Designer <span class="__rowShowInfo">- view info.</span></a></td>
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(1);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a><input type="text" value="1" id="ordering[1]" name="ordering"></td>
  </tr>
  <tr>
    <td width="5" align="center" class="cols sort">&nbsp;</td>
    <td align="left"><a onclick="getUsrInfo(2)" class="__productTBLink"><strong>George Jetson</strong>, Driver <span class="__rowShowInfo">- view info.</span></a><input type="text" value="2" id="ordering[2]" name="ordering"></td>
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(2);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a></td>
  </tr>
</tbody>

I just want the input field "ordering" to be updated when the item is moved using jquery sortable.

Thanks in advance :)

You should give your tr.'s id's. Here is a jsfiddle

<tbody class="sortable ui-sortable">
  <tr id="1">
    <td width="5" align="center" class="cols sort">&nbsp;</td>
    <td align="left"><a onclick="getUsrInfo(1)" class="__productTBLink"><strong>Leanne Seawright</strong>, Web Designer <span class="__rowShowInfo">- view info.</span></a></td>
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(1);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a><input type="text" value="1" id="ordering[1]" name="ordering"></td>
  </tr>
  <tr id="2">
    <td width="5" align="center" class="cols sort">&nbsp;</td>
    <td align="left"><a onclick="getUsrInfo(2)" class="__productTBLink"><strong>George Jetson</strong>, Driver <span class="__rowShowInfo">- view info.</span></a><input type="text" value="2" id="ordering[2]" name="ordering"></td>
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(2);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a></td>
  </tr>
</tbody>