JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<table id="tableID">
    <tr>
        <td>1</td>
    </tr>
</table>
<button id="addRows">Add another row!</button>

CSS

table {
    width: 50%;
    margin: 0 auto 1em auto;
    empty-cells: show;
}
td {
    border: 1px solid #ccc;
}

JavaScript

$('#tableID').bind('DOMNodeInserted', function() {
    var count = $('table tr').length;
    alert("The number of rows has changed, there are now " + count + " rows.");
    });

$('#addRows').click(
    function(){
        var row = document.createElement('tr');
        var cell = document.createElement('td');
        var c = $('#tableID tr').length + 1;
        $(row).appendTo($('#tableID'));
        $(cell).appendTo('#tableID tr:last').text(c);
    });