Getting table headers while using jquery sortable in laravel

Following is the snippet of my code, that basically displays a table using foreach loop:

<table id="sort1">
<thead>
<tr>
@foreach($val as $value => $val1)
<td>
@foreach($val1 as $key=>$val2)
<table id="sort">
<tr>
<td><br><br></td>
</tr>
</table>
</td>
</tr>
</thead>
</table>


<script>


$( "table #sort" ).draggable({

    start: function( event, ui ) {
        var $th = $(this).closest('#sort1 thead tr td' );
    console.log($th.text());
    }

});


$( "table #sort" ).droppable({
    drop: function( event, ui ) {
        var $th1 = $(this).closest('#sort1 thead tr td' );
    console.log($th1.text());
    }

});

</script>

The above code though, returns the header at the start of the drag event, along with other td values, incase that particular cell has any data next to it.It returns the headers only if the column is empty.I know that this has something to do with the callback function, but am unable to understand the same.What can be done here,any suggestion would be appreciated.

P.S: Here only my td with id sort is draggable, i.e only the table cell would be draggable.

via Chebli Mohamed