JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ol>
  <li>Drag a row from table1 to table2. Observe the 'receive' function is correctly called.</li>
  <li>Start dragging that same row from table2. While dragging, move the mouse over table1 without dropping it there, then move back over table2 and drop. Observe that 'receive' was not called, so the row is incorrectly attached to the div.duplication-group, not to the tbody.</li>
</ol>

<div class="address-group">
<table>
  <thead>
    <tr><td>One</td><td>Two</td><td>Three</td></tr>
  </thead>
  <tbody>
    <tr class="draggable"><td>1</td><td>2</td><td>3</td></tr>
    <tr class="draggable"><td>4</td><td>5</td><td>6</td></tr>
    <tr class="draggable"><td>7</td><td>8</td><td>9</td></tr>
  </tbody>
</table>
</div>

<div class="duplication-group">
  <table>
    <thead>
      <tr><td>One</td><td>Two</td><td>Three</td></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>2</td><td>3</td></tr>
    </tbody>
  </table>
</div>

CSS

table {
  border-collapse: collapse;
  margin-bottom: 1em;
}

td {
  border: 1px solid black;
  padding: 0.2em;
  background-color: white;
}

tr.draggable td{
  background-color: #fff4cc;
}

.ui-sortable-helper {
    display: table;
}

JavaScript

$(function(){

	$(".duplication-group, .address-group").sortable({
  	connectWith: ".duplication-group, .address-group",
    items: "table > tbody > tr.draggable",
    receive: function (ev, ui) {  // Problem: cannot simply drop on an empty table (https://stackoverflow.com/a/4350165/11683)
    	console.log(ui.item);  // debugging
      ui.item.parent().find("table > tbody").append(ui.item);
    },
    dropOnEmpty: true,
    cancel: "tr:not(.draggable)",
    revert: 200,
    cursor: "move"
  });

});