How to Update sort order number after list item moved from one list to another in jQuery UI sort

Question

I am using jquery ui sort to move items from list 1 to list 2, on every element I have some number so whenever item is moved I want both list 1,list 2 should update its sort number. for example: list 1 has 4 items if item3 moved from list1 to list2,then list1 should reorder like item1 item2 item3,same way after item moved to list 2, list 2 also reorder its number and it should become item 5.

css:

 <style>
        .sortable_list {
            border: 1px solid #eee;
            width: 142px;
            min-height: 20px;
            list-style-type: none;
            margin: 0;
            padding: 5px 0 0 0;
            float: left;
            margin-right: 10px;
        }

        .sortable_list li {
            margin: 0 5px 5px 5px;
            padding: 5px;
            font-size: 1.2em;
            width: 120px;
        }
    </style>

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>

html code:

<ul id="sortable1" class="sortable_list connectedSortable">
    <li class="ui-state-default">1-List 1 - Item 1</li>
    <li class="ui-state-default">2-List 1 - Item 2</li>
    <li class="ui-state-default">3-List 1 - Item 3</li>
    <li class="ui-state-default">4-List 1 - Item 4</li>

</ul>
<ul id="sortable2" class="sortable_list connectedSortable">
    <li class="ui-state-highlight">1-List 2 - Item 1</li>
    <li class="ui-state-highlight">2-List 2 - Item 2</li>
    <li class="ui-state-highlight">3-List 2 - Item 3</li>
    <li class="ui-state-highlight">4-List 2 - Item 4</li>

</ul>  

<script>
    $(function () {
        $(".sortable_list").sortable({
            connectWith: ".connectedSortable",
            receive: function (event, ui) {

           var sender=ui.sender[0].id;
                 $('#'+sender).each(function (i) {
            var numbering = i + 1;
            $(this).text(numbering);
        });

            }
        }).disableSelection();
    });
</script>

Answer 1

Use some badge or span to sort it by number i will update here

<ul id="sortable1" class="sortable_list connectedSortable">
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 1</li>
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 2</li>
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 3</li>
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 4</li>

</ul>

In Jquery write each function to iterate over it

$("#" + sender + " li").each(function (n) {
   $(this).find('.number').html(n + 1);
});