How do I get the content of TR from a dynamic HTML Table when dragging it to another Table

I'm doing a website in Django, where I create different dynamic tables in HTML. From a menu I click to unhide the desired tables. I made the rows from the tables draggable, so when I unhide, for example 4 tables I can drag the row from the first table and drop it in whatever table I want. Now the thing is, I cannot get the content of the row that I drag. I want to get it, in order to send it to the database to change the content of the modified tables.

Here is some coding:

<div class="navmenu">
  <ul class="nav myulclass" id="my-tabs">
  {% for sub, values in data.items %}
    <li onClick="javascript:showonlyone('{{ sub }}');">{{ sub }}</li>
  {% endfor %}
  </ul>
</div>

<div class="tabbable">
  {% for sub, values in data.items  %}
  <div class="rasptable" id="{{ sub }}">
    <table class="formatRasp">
      <thead>
        <tr>
          <th>Hostname</th>
          <th>IP Address</th>
        </tr>
      </thead>
      <tbody class="connectedSortable">
      {% for rpi in values %}
        <tr>
          <td id="{{ rpi.get_serial }}">{{ rpi.get_serial }}</td>
          <td>{{ rpi.get_ip_address  }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $tabs = $(".tabbable");
        $("tbody.connectedSortable").sortable({
            connectWith: ".connectedSortable",
            start: function(){
                $tabs.addClass('dragging')
            },
            stop: function(){
                $tabs.removeClass('dragging');
                alert('dropped item: ')
            },
        }).disableSelection();
    });
</script>
</body>