JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tcontainer">
    <table width="90%" border="1" id="t1">
        <caption>
            Source
        </caption>
        <tr>
            <th scope="col">Team</th>
            <th scope="col">Number of Bundles</th>
            <th scope="col">Number of Orders</th>
            <th scope="col">Number of Shipping Tags</th>
        </tr>
        <tr>
            <td class="team">1</td>
            <td class="bundle" id="b1">100</td>
            <td class="order">9</td>
            <td class="tag">15</td>
        </tr>
        <tr>
            <td class="team">2</td>
            <td class="bundle" id="b2">800</td>
            <td class="order">15</td>
            <td class="tag">30</td>
        </tr>
        <tr>
            <td class="team">3</td>
            <td class="bundle" id="b3">550</td>
            <td class="order">11</td>
            <td class="tag">26</td>
        </tr>
    </table>
</div>

<div class="tcontainer">
    <table width="90%" border="1" id="t2">
        <caption>Target</caption>
        <tr>
            <th scope="col">Team</th>
            <th scope="col">Number of Bundles</th>
            <th scope="col">Number of Orders</th>
            <th scope="col">Number of Shipping Tags</th>
        </tr>
        <tr>
            <td class="team">1</td>
            <td class="tbundle">500</td>
            <td class="torder">29</td>
            <td class="ttag">53</td>
        </tr>
    </table>
</div>

CSS

div.tcontainer {
  float: left;
  width: 50%;
}

div.drag-row {
    width: 400px;
    background-color: #7FA5D7;
    height: 20px;
}

JavaScript

$(function(){
            setupDragDrop($('#t1 tr'), $('#t2 tr'));
            setupDragDrop($('#t2 tr'), $('#t1 tr'));
        });

        function setupDragDrop(source, target) {
            source.draggable({
                revert: false,
                opacity: .75,
                containment: '.container',
                cursor: 'move',
                cursorAt: { top: 35, left: 45 },
                helper: function(event) {
                    return $('<div class="drag-row"><table></table></div>')
                            .find('table').append($(event.target).closest('tr').clone()).end();
                },
                appendTo: 'body'
            });

            target.droppable({
                drop: function(event, ui) {
                    
                },
                accept: source.selector
            });
        }