Passing list item value during JQuery sortable() function

I'm trying to pass information from an unordered list, list item to an ajax request once the list item is placed in another list.

This is the JQuery that picks up the column #id the list item is dropped into, however the code for getting the $row['id'] picks up the first item in each list, not the specific item I'm sorting.

(I'm using php to iterate the list items in both lists - I've removed the unessential PHP code).

<script type="text/javascript">
$(document).ready(function(){

$(".sortable").sortable({

connectWith : ".sortable",
receive  : function(){

         var column = $(this).closest('div.box').attr('id');
         var id = $(this).find('span').html(); 

         $.ajax({
                 url: "update_column.php",
                 type:"POST",
                 data: "column="+column+"&id="+id
                });

         alert(column + id)

                 }

})
.disableSelection();

});
</script>

I'm using the alert() to give me some visual feedback. This is the HTML code:

    <div id="one" class="box">
    <ul class="sortable">


         <li>
         <div class="card">
         <p>' . $row['customer'] . '</p>
         <p>' . $row['ponumber'] . '</p>
         <p clas开发者_如何学JAVAs="hide"><b>ID:</b><span>' . $row['id'] . '</span></p>
         <p class="hide">' . $row['misc'] . '</p>
         </div>
         </li>       



    </ul>
    </div>   

    <div id="two" class="box">
    <ul class="sortable">


         <li>
         <div class="card">
         <p>' . $row['customer'] . '</p>
         <p>' . $row['ponumber'] . '</p>
         <p class="hide"><b>ID:</b><span id="id">' . $row['id'] . '</span></p>     
         <p class="hide">' . $row['misc'] . '</p>
         </div>
         </li>






    </ul>
    </div>   

I'm a self taught programmer who has been programming for 3 months so I apologise for any novice mistakes.

I've updated your js, it works now. I have added comments where required.

$(document).ready(function(){

    $(".sortable").sortable({

        connectWith : ".sortable",
        receive  : function(event, ui){

            //changed this to be use parent()
            var column = $(this).parent().attr('id');
            //get the current dragged item - as per http://jqueryui.com/demos/sortable/#event-receive
            var index = ui.item.index() + 1 ;
            //get the id from the span using the column we got in the first step and index we got above 
            var id = $("#"+column+" li:nth-child("+index+") span").html();

            $.ajax({
                url: "update_column.php",
                type:"POST",
                data: "column="+column+"&id="+id
            });
        }

    }).disableSelection();

});