JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

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>
    <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');
     });

     
     var myform = $('#myform'),
         iter = 0;
     $('#btnAddCol').click(function () {
         myform.find('tr').each(function(){
           var trow = $(this);
             if(trow.index() === 0){
                 trow.append('<td>Col'+iter+'</td>');
             }else{
                 trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>');
             }
            
         });
         iter += 1;
     });
 });