JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<div class="table">
    <div class="tr"></div>
</div>
<button id="add">Add</button>
<button id="remove">Remove td</button>
<button id="add_row">Add Row</button>

CSS

.table, .tr, .td {
    border: 1px solid black;
    padding: 10px;
    margin: 2px;
}
.tr {
    display: block;
    background-color: rgba(200, 100, 5, .2);
}
.td {
    background-color: rgba(100, 200, 50, .2);
    ;
}
.tr .td {
    display: inline-block;
}

JavaScript

var counter = 0;

 $('#add').on('click', function () {
     $(this).text('Stop add td');
     $('.table .tr').on('click', function () {
         
         $(this).append($('<div class="td"></div>').text(prompt('td text: ')));
         $('#add').one('click', function (e) {
             e.preventDefault();
             $('.table .tr').off('click');
             $(this).text('Add');
         });
     });


 });

 $('#remove').on('click', function () {
     $(this).text('Stop remove');
     $('.table .td').on('click', function () {
         $(this).remove();
         $('#remove').one('click', function (e) {
             e.preventDefault();
             $('.table .td').off('click');
             $(this).text('Remove td');
         });
     });

 });

 $('#add_row').on('click', function () {
     $('.table').append($('<div class="tr"></div>'));
 });