JSFiddle - React, Tailwind, and code Playground

Dynamic add rows

by Dave

HTML

<table>
    <tr><td>1</td><td>2</td>            
    </tr>
     <tr><td>3</td><td>4<input value='add' type='submit' onclick='window.addRow(this);' /></td>            
    </tr>

    
</table>

CSS

td {
    padding: 10px;
    background-color: yellow;
    border: solid 1px black;
}

JavaScript

$(function() {

    var  counter = 0;
    window.deleteParentTr = function(theThis) {
        $(theThis).closest('tr').remove();
    };

    window.addRow = function(theThis) {
        var
            newrow = $("<tr><td>"+(counter++)+"</td><td>"+(counter++)+"<input value='add' type='submit' onclick='window.addRow(this);' /><input value='delete' type='submit' onclick='window.deleteParentTr(this);' /></td></tr>");
        $(theThis).closest('tr').after(newrow);
        newrow.each(addToRow);
    };

    $("tr").each(addToRow);
});