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>

<br />
<span id='removeAndAdd'>Click me to Remove all first and Add new rows</span>

JavaScript

$('.add-selected').on("click",function() {
       alert('hello');
    });

    $('#removeAndAdd').click(function(event) {
        event.preventDefault();
        
        var output = '';
        output += '<tbody class="filter-rows">';
        output += '<tr class="filter">';
        output += '<td><input type="checkbox" id="c-1" class="add-selected" /></td>';
        output += '<td>1</td>';
        output += '</tr>';
        output += '</tbody>';
        
        output += '<tbody class="filter-rows">';
        output += '<tr class="filter">';
        output += '<td><input type="checkbox" id="c-2" class="add-selected" /></td>';
        output += '<td>2</td>';
        output += '</tr>';
        output += '</tbody>';

        $('.filter-rows').empty();
        $('#add-new-table tbody:last').after(output);
    });