JSFiddle - React, Tailwind, and code Playground

HTML

<table id="BoxTable">
    <tr>
        <th>Name</th>
        <th>Comparision</th>
        <th>Value</th>
        <th>Delete</th>
    </tr>
    <tr id="TemplateRow">
        <td>
            <select name="BoxName" id="BoxName">
                <option selected="selected" value="attr1">attr1</option>
                <option value="attr2">attr2</option>
                <option value="attr3">attr3</option>
                
            </select>
        </td>
        <td>
            <select name="BoxComparison" id="BoxComparison">
                <option selected="selected" value="=">=</option>
                <option value=">">&gt;</option>
                <option value="&lt;">&lt;</option>
                <option value="Like">Like</option>
                <option value="!=">!=</option>
            </select>
        </td>
        <td>
            <input name="BoxVal" type="text" id="BoxVal" />
        </td>
        <td>
            <input id="DeleteBoxRow" type="checkbox" name="DeleteBoxRow" />
        </td>
    </tr>
    <tr>
        <td colspan="4"> 
            <input type="submit" name="AddAttr" value="Add Box Attribute" id="AddAttr" />
        </td>
    </tr>
</table>

CSS

#TemplateRow { display:none; }

table, tr, td, th { border: solid thin black; padding: 5px; }

JavaScript

$(function() {
    //attach the a function to the click event of the "Add Box Attribute button that will add a new row
    $('#AddAttr').click(function() {
        //clone the template row, and all events attached to the row and everything in it
        var $newRow = $('#TemplateRow').clone(true);
        
        //strip the IDs from everything to avoid DOM issues
        $newRow.find('*').andSelf().removeAttr('id');

        //add the cloned row to the table immediately before the last row
        $('#BoxTable tr:last').before($newRow);

        //to prevent the default behavior of submitting the form
        return false;
    });
    
    //attach a remove row function to all current and future instances of the "remove row" check box
    $('#DeleteBoxRow').click(function() {
        //find the closest parent row and remove it
        $(this).closest('tr').remove();
    });
    
    //finally, add an initial row by simulating the "Add Box Attribute" click
    $('#AddAttr').click();
});