JSFiddle - React, Tailwind, and code Playground

by Muhammad Faisal Ashfaq

HTML

<body>
    <div>
        <table>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>b</td>
            </tr>
            <tr>
                <td>
                    <input type="text">
                </td>
                <td>
                    <input type="text">
                </td>
                <td>
                    <input type="text">
                </td>
                <td>
                    <button onclick="addElements(); this.style.display='none'">+</button>
                </td>
            </tr>
        </table>
    </div>
</body>

CSS

tr:last-child button{
    display:inline !important;
}

JavaScript

function addElements() {
    var a = document.createElement("tr");
    a.innerHTML = "<td><input type=\"text\"></td><td><input type=\"text\"></td><td><input type=\"text\"></td><td><a                             id=\"1\" href=\"#\" onclick=\"del(); this.parentNode.parentNode.remove(this);\">&#10008;</a> </td><td><button                           onclick=\"addElements(); this.style.display='none';\">+</button></td>";
    document.body.children[0].children[0].children[0].appendChild(a);
}

function del() {

    var last_tr = document.getElementsByTagName("tbody")[0].lastChild;

    if (last_tr.lastChild.children.length != 1) {
        var t = document.createElement("td");
        t.innerHTML = "<button onclick=\"addElements(); this.remove(this);\">+</button>";
        last_tr.appendChild(t)
    }
}