JSFiddle - React, Tailwind, and code Playground

HTML

<table id="add-new-table" border="1px">
        <thead>
            <th>ID</th>
            <th>SKU</th>
        </thead>
    
        <tbody>
            <tr>
                <td>Lbel</td>
                <td>011</td>
            </tr>
        </tbody>
    
        <tbody class="filter-rows">
            <tr class="filter">
                <td><input type="checkbox" id="c-1" class="add-selected" /></td>
                <td>1</td>
            </tr>
        </tbody>
    
        <tbody class="filter-rows">
            <tr class="filter">
                <td><input type="checkbox" id="c-2" class="add-selected" /></td>
                <td>2</td>
            </tr>
        </tbody>
    
        <tbody class="filter-rows">
            <tr class="filter">
                <td><input type="checkbox" id="c-3" class="add-selected" /></td>
                <td>3</td>
            </tr>
        </tbody>
    
    </table>

<p><a href="#" id="removeAndAdd">Click me to Remove all first and Add new rows</a></p>

JavaScript

$('#add-new-table').on('change', 'input', function() {
   alert('hello');
});

$('#removeAndAdd').click(function(event) {
    event.preventDefault();

    var rows = $('#add-new-table .filter-rows');

    rows.first().add(rows.last()).remove();
});