JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" id="mtable">
   
<tbody>
    <tr>
        <td class="container"></td>
        <td class="container"></td>
        <td class="container"></td>
    </tr>
    <tr>
        <td class="container"></td>
        <td class="container"></td>
        <td class="container"></td>
    </tr>
    
    <tr>
        <td class="container">a</td>
        <td class="container">b</td>
        <td class="container">c</td>
    </tr>  
    
    </tbody>
</table><br/><br/>



<button id="irow">Insert Row</button><br/><br/>
<button id="icol">Insert Column</button><br/><br/>



<br/>There are <span id="rowcount"></span> rows
<br/>There are <span id="colcount"></span> columns

CSS

td.container { height: 20px; 
 width: 20px; 
        text-align:center; 
    vertical-align:middle;
}

JavaScript

$('#irow').click(function(){
       $('#mtable tbody').append($("#mtable tbody tr:last").clone());  
    var rowCount = $('#mtable tr').length;
    $("#rowcount").text(rowCount)   
    });
////////////////////////////////////////////
$('#icol').click(function(){ 
        $('#mtable tr').append($("<td class='container'>"));
        $('#mtable thead tr>td:last').html($('#col').val());
        $('#mtable tbody tr').each(function(){$(this).children('td:last').append($(''))});
    
     var col = $('#mtable tbody tr:first > td').length;
    $("#colcount").text(col);    
});