JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="selectAll">Select All</a>

<table id="table1">
    <tr>
        <td>Foo1 <input type="checkbox" /></td>
    </tr>
    <tr>
        <td>Bar2 <input type="checkbox" /></td>
    </tr>
</table>

<table id="table2">
    <tr>
        <th>Selected rows</th>
    </tr>
</table>

<a id="moveRows" href="#">Move rows</a>

JavaScript

$(function() {
    // Bind button
    $('#moveRows').click(moveSelectedRows);
    // Select All-button
    $('#selectAll').click(function() {
        $('#table1 input[type="checkbox"]').prop("checked", true);
    });
});

function moveSelectedRows() {
    $('#table1 input[type="checkbox"]:checked').each(function() {
        // Remove from #table1 and append to #table2
        $('#table2').append($(this).closest('tr').remove());
        // Remove the checkbox itself
        $(this).remove();
    });
}