JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<strong>Start Increment from Next ID to be inserted in the DB:</strong><input id="increment_num" name="increment_num"  type="text" /></br>
<table>
	<thead>
		<tr><th>ID from DB</th><th></th>
		<th>First Name</th></tr>
	</thead>
	<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_fname_1" name="person_fname" placeholder=" First Name" type="text" value='James'/></td>
			<td><input type="button" class="save-button" value="Save" />
		</tr>
		<tr id="pq_entry_2" class="clonedSection" >
			<td><input type="text" name="person_id" value='2' readonly /></td>
			<td><input id="person_fname_2" name="person_fname" placeholder=" First Name" type="text" value='Cynthia'/></td>
			<td><input type="button" class="save-button" value="Save" />
		</tr>
	</tbody>
</table>
<input type='button' id='btnAdd' value='add another Person' />
<input type='button' id='btnDel' value='Delete' /></br>
</form>

JavaScript

$(document).ready(function () {
	var $increment_num = $('#increment_num');
	var interval = 5000;  //3000 = 3 seconds
	function doAjax() {
		$.ajax({
			type: 'POST',
			url: 'personAutoIncrement.php',
			data: $(this).serialize(),
			dataType: 'json',
			success: function (data) {
				var $cloned = $('#input_table tr').not('[data-saved]');
				var base_number = 1 + Math.floor(Math.random() * 6);
				var num = parseInt(base_number);
				$increment_num.val(num);
				$cloned.each(function(i){
					var $this = $(this);
					$this.find('[name^="person_id"]').first().val(num+i);
				})
			},
			complete: function (data) {
				// Schedule the next
				setTimeout(doAjax, interval);
				var $cloned = $('#input_table tr').not('[data-saved]');
				var base_number = 1 + Math.floor(Math.random() * 6);
				var num = parseInt(base_number);
				$increment_num.val(num);
				$cloned.each(function(i){
					var $this = $(this);
					$this.find('[name^="person_id"]').first().val(num+i);
				})
		}
	});
	}
	setTimeout(doAjax, interval);
	var click_count = 0;
	
	$('#btnAdd').click(function () {
		click_count++;
		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_lname = 'person_lname_'+num;

		newSection.removeAttr('data-saved');
		
		// clear out all sections of new input
		newSection.find('input[type="text"]').val('');
		
		newSection.find('input[name^="person_id"]').attr({
			'id': person_id
		}).val(next_num);
		
		newSection.find('input[name^="person_fname"]').attr({
			'id': person_fname
		});
		
		newSection.find('input[type="button"]').attr('data-ident', next_num);
		
		
		$('#input_table').append(newSection);
		$('#btnDel').prop('disabled', '');
		if (num == 100) $('#btnAdd').prop('disabled',...