JSFiddle - React, Tailwind, and code Playground

HTML

<div id="labels">
    <table class="config" id="labelTable">
        <thead>
            <tr>
                <th colspan="4" ; style="padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
            </tr>
            <tr>
                <th>Index</th>
                <th>Response Number</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <form id="configform" name="input" action="#" method="get">
                <tr>
                    <td style="text-align: center">1</td>
                    <td>
                        <div data-role="fieldcontain" class="ui-hide-label">
                            <label for="number_1">Response Number</label>
                            <input type="text" name="number_1" id="number_1" value="" placeholder="Response Number" />
                        </div>
                    </td>
                    <td>
                        <div data-role="fieldcontain" class="ui-hide-label">
                            <label for="label_1">Description</label>
                            <input type="text" name="label_1" id="label_1" value="" placeholder="Description " />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td>
                        <div data-role="fieldcontain" class="ui-hide-label">
                            <label for="number_2">Response Number</label>
                            <input type="text" name="number_2" id="number_2" value="" placeholder="Response Number" />
                        </div>
                    </td>
                    <td>
                        <div data-role="fieldcontain" class="ui-hide-label">
                            <label for="label_2">Description</label>
                            <input type="text" name="label_2" id="label_2" value=""...

JavaScript

$("#configtable").hide();
currentIndex = 4;
//when add more button is clicked
$("#addMore").click(function () {
    currentIndex = $("#labelTable tr:last td:first").text();
    if (currentIndex === "") {
        currentIndex = 0;
    }
    currentIndex++;
    //currentIndex = parseInt(currentIndex) + 1;
    //  $('#ptest').append("current index="+currentIndex);
    var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
        '<td >' +
        '<div data-role="fieldcontain" class="ui-hide-label">' +
        '<label for="number_' + currentIndex + '">Response Number</label>' +
        '<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
        '</div></td><td>' +


        '<div data-role="fieldcontain" class="ui-hide-label">' +
        '<label for="label_' + currentIndex + '">Description</label>' +
        '<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
        '</div></td></tr>';

    var displaymore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
        '<td width="60%"><p id="label_row_' + currentIndex + '"></p></td>' +
        '<td><button type="button" id=switch_' + currentIndex + '  data-role="button" data-transition="fade">Activate</button></td></tr>';

    // ++currentIndex;
    $('#labels #labelTable tr:last').after(addmore);
    $('#configtable #configtableTable tr:last').after(displaymore);
    $("#labelTable").trigger("create");
    $("#configtableTable").trigger("create");
    $("#rowRemove").button("enable");
});

$("#rowRemove").click(function () {
    if (currentIndex > 1) {
        $("#labelTable tr:last").remove();
        $("#configtableTable tr:last").remove();
        currentIndex--;
        if (currentIndex === 1) {
            $("#rowRemove").button("disable");
        }

    }

});

//when submit button is...