JSFiddle - React, Tailwind, and code Playground

HTML

<form name="myform" id="myform">       
<table id="blacklistgrid">
            <tr id="Row1">
                <td class="space">&nbsp;</td>
                <td >
                    Red
                </td>
                <td>
                    Yellow
                </td>
                <td>
                    Green
                </td>
            </tr>
            <tr id="Row2">
                <td><input type="text" placeholder="shade" name="shade"/></td>
                <td >
                    <input type="checkbox" name="red"/>
                </td>
                <td>
                    <input type="checkbox" name="yellow"/>
                </td>
                <td>
                    <input type="checkbox" name="green"/>
                </td>
            </tr>
        </table>
    <button type="button" id="btnAdd">Add few more Rows!</button></br></br>
<input type=text placeholder='columnname'/>
<button type="button" id="btnAddCol">Add new column</button></br></br>

    <input type="submit"></input>
</form>

CSS

td{
    padding-right: 15px
}
.space {
    padding-right: 75px;
}

JavaScript

$(document).ready(function () {
        $('#btnAdd').click(function () {
              var count = 3, first_row = $('#Row2');
                while(count-- > 0)                    first_row.clone().appendTo('#blacklistgrid');
     });   
     
        $('#btnAddCol').click(function () {
            $("#blacklistgrid tr").each(function(){
               $(this).append("<td><input type='checkbox'/></td>");       
            })
     });      
 });