JSFiddle - React, Tailwind, and code Playground

by Rajaprabhu Aravindasamy

HTML

<div>SINGLE NEEDLES
    <br />
    <table>
        <tr>
            <td>
                <div class="sizes">size</div>
                <div class="sizes">length</div>
            </td>
        </tr>
    </table>	<a href="#" class="add-another-table">Add another table</a>

    <br />
    <br />DOUBLE NEEDLES
    <br />
    <table>
        <tr>
            <td>
                <div class="sizes">size</div>
                <div class="sizes">length</div>
            </td>
        </tr>
    </table>	<a href="#" class="add-another-table">Add another table</a>

    <br />
    <br />TRIPLE NEEDLES
    <br />
    <table>
        <tr>
            <td>
                <div class="sizes">size</div>
                <div class="sizes">length</div>
            </td>
        </tr>
    </table>	<a href="#" class="add-another-table">Add another table</a>

    <br />
    <br />
</div>

CSS

div {
			    display: block;
			    border: 1px solid #333;
			    padding: 10px;
			}
			table {
			    border: 1px solid #ff0000;
			}
			td {
			    border: 1px solid #666;
			}
			.sizes {
			    border: 0px;
			    display: inline-block;
			}
			.remove-table span {
			    cursor: pointer;
			}

JavaScript

$(document).ready(function () {
    $('.add-another-table').click(function (event) {
        event.preventDefault();
        var clonedTable = $(this).prev('table').clone();
        $(this).before(clonedTable.find('.remove-table').remove().end().find('tr').append('<td class="remove-table"><span>REMOVE</span></td>').end());
    });

    $('div').on('click', '.remove-table', function (event) {
        event.preventDefault();
        $(this).closest('table').remove();
    });
});