JSFiddle - React, Tailwind, and code Playground

HTML

<table id="catalog_table">
    <tr><td>Checkbox<input type="checkbox" name="chkbox" value="1"/></td></tr>
    <tr><td>Checkbox<input type="checkbox" name="chkbox" value="2"/></td></tr>
    <tr><td>Checkbox<input type="checkbox" name="chkbox" value="3"/></td></tr>
    <tr><td>Checkbox<input type="checkbox" name="chkbox" value="4"/></td></tr>
    <tr><td>Checkbox<input type="checkbox" name="chkbox" value="5"/></td></tr>
    <tr><td>Checkbox<input type="checkbox" name="chkbox" value="6"/></td></tr>
    <tr><td>Checkbox<input type="checkbox" name="chkbox" value="7"/></td></tr>
</table>
<textarea  id="root"></textarea>

JavaScript

var selected = new Array();
$(document).ready(function(){

    $("input[type='checkbox']").on('change', function() {
        if ($(this).is(":checked")) {
            selected.push($(this).val());
        } else {
            for(var i = 0; i<selected.length;i++) {
                if (selected[i] == $(this).val()) {
                    selected.splice(i, 1);
                }
            }
        }
        
        // output selected
        var output = "";
        for (var o = 0; o<selected.length; o++) {
            if (output.length) {
                output += ", " + selected[o];
            } else {
                output += selected[o];
            }
        }
        $("#root").val(output);
    });
});