如何获取可排序的portlet位置并在移动时更新它？

I am currently working with jQuery UI sortable portlets and PHP, and I need to be able to get the number position where each portlet is and update it when moved.

The portlet in the 1st position should always say Position 1, and the portlet in the 2nd Position should always say Position 2.

The trick is that I want it to update every time that I move a portlet, so that the portlet in the 1st Position is ALWAYS Position 1 and so on. This is because I am moving unique data in these portlets, and the Position value will determine what priority this information is displayed on another page.

So how do I get and display a portlets position on each portlet, and update it whenever it is moved?

<script>
$(function() {
$( ".column" ).sortable({
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    placeholder: "portlet-placeholder ui-corner-all"    
});
$( ".portlet" )
    .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
    .find( ".portlet-header" )
    .addClass( "ui-widget-header ui-corner-all" )
});
</script>

<?php
for($i = 0; $i < 6; $i++){
?> 
<div class="portlet" id='portlet<?php echo $i; ?>'>

    <div class="portlet-header">
        <div>Position:<span id="value<?php echo $i; ?>"></span></div>
        <script>
             $(document).ready(function() {
                  var portletPosition = $('#portlet<?php echo $i; ?>').sortable("serialize");
                  $("#value<?php echo $i; ?>").html(portletPosition);
             });
        </script>
    </div>

//Unique Portlet data

</div>
<?php
}
?>