JSFiddle - React, Tailwind, and code Playground

by TheJoeFletch

HTML

<div></div>

CSS

td{ border: 1px solid black;}
table, td, tr {margin: 10px; padding:10px;}

JavaScript

$(document).ready(function() {

    $.fn.ct = function() {
        $(this).html("<table><tbody><tr><td>delete</td><td><span class=\"add\">add</span></td><td>dummy</td></tr></tbody></table>");

        var tbl = $("> table", $(this))

        tbl.on("click", "span.add", function() {
            $(this).closest("tr").after("<tr class=\"for-removing\"><td colspan=\"3\"></td></tr>");
console.log("fire");
        $(this).closest("tr").next("tr.for-removing").children("td:first").ct();
            });

    };

    $("div").ct();






});