JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tbody id="input_table" >
    <tr id="pq_entry_1" class="clonedSection" data-saved="1">
        <td><input type="text" name="person_id" value='1' readonly /></td>
        <td>
        <input id="person_id_1" name="person_id_1" type="text" value='1'/>
        <input id="person_fname_1" name="person_fname" placeholder=" First Name" type="text" value='James'/>
        </td>
        <td>
        <select id="person_status_1" name="person_status_1"></select>
        </td>
    </tr>
    <tr id="pq_entry_2" class="clonedSection" data-saved="2">
        <td><input type="text" name="person_id" value='2' readonly /></td>
        <td>
        <input id="person_id_2" name="person_id_2" type="text" value='2'/><input id="person_fname_2" name="person_fname" placeholder=" First Name" type="text" value='Cynthia'/>
        </td>
        <td>
        <select id="person_status_2" name="person_status_2"></select>
        </td>
    </tr>
</tbody>
</table>
<input type='button' id='btnAdd' value='add another Person' />
<input type='button' id='btnDel' value='Delete New Field' /></br>

JavaScript

$('#btnAdd').click(function () {
        var $clones     = $('#input_table tr'),
            num         = $clones.size() + 1,
            next_num    = parseInt($clones.last().find('input[name^="person_id"]').val()) + 1,
            $template   = $clones.first(),
            newSection  = $template.clone().attr('id', 'pq_entry_'+num),
            person_id   = 'person_id_'+num;
            person_fname = 'person_fname_'+num;
            person_status = 'person_status_'+num;

        newSection.removeAttr('data-saved');

       // clear out all sections of new input
        newSection.find('input').val('');
        newSection.find('select').val([]);

        newSection.find('input[name^="person_id"]').attr({
            'id': person_id,
            'name': person_id
        }).val();
        newSection.find('input[name^="person_fname"]').attr({
            'id': person_fname,
            'name': person_fname,
            'placeholder' : 'Person #'+num+' First Name'
        }).val();
        newSection.find('select').attr({
            'id': person_status,
            'name': person_status
        }).val(next_num);
        newSection.find('input[type="button"]').attr('data-ident', next_num);

        $('#input_table').append(newSection);
        $('#btnDel').prop('disabled', '');
        if (num == 100) $('#btnAdd').prop('disabled', 'disabled');
    });

    $('#btnDel').click(function () {
        var num = $('.clonedSection').length; // how many duplicate input fields we currently have
        var toDelete = $('#pq_entry_' + num).not('[data-saved]');
        
        if (toDelete.length) {
            // Last one wasn't a db-entry
            toDelete.remove();
        
            // enable the "add" button
            $('#btnAdd').prop('disabled', '');
        
            // if only one element remains, disable the "remove" button
            if ($('.clonedSection:not([data-saved])').length == 0) 
                $('#btnDel').prop('disabled', 'disabled');
   ...