JSFiddle - React, Tailwind, and code Playground

HTML

<button id="add">Add Row</button>
<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>
                <input type="text" id="name1" value="" />
            </td>
            <td>
                <input type="text" id="phone1" value="" />
            </td>
            <td>
                <input type="text" id="email1" value="" />
            </td>
            <td>
                <button id="delete">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

window.globalCounter = 2;

$(document).ready(function () {
    $("#add").on("click", function () {
        var data = '<tr><td>' + window.globalCounter + '</td><td><input type="text" id="name2" value=""/></td><td><input type="text" id="phone2" value=""/></td><td><input type="text" id="email2" value=""/></td><td><button id="delete">Delete</button></td></tr>';
        $("tbody").append(data);
        window.globalCounter++;
    });

    $("tbody").on("click", "#delete", function (ev) {
        var $currentTableRow = $(ev.currentTarget).parents('tr')[0];
        $currentTableRow.remove();
        window.globalCounter--;
        
        $('table').find('tr').each(function (index) {
            var firstTDDomEl = $(this).find('td')[0];
            var $firstTDJQObject = $(firstTDDomEl);
            $firstTDJQObject.text(index + 1);
        });
    });


});