JSFiddle - React, Tailwind, and code Playground

HTML

<form>
Number to start increment from:
<input id="increment_num" name="increment_num" placeholder="" type="text" /></br>
Values:
<ul class="clonedSection">
			<li id="pq_entry_1">
				<input id="increment_id_1" name="increment_id_1" placeholder="" type="text" />
			</li>
</ul><br/>
<input type='button' id='btnAdd' value='add text box' />
<input type='button' id='btnDel' value='Delete' /></br>

</form>

JavaScript

$(document).ready(function () {
	var $increment_num = $('#increment_num');
	
	var interval = 3000;  //3000 = 3 seconds
	function doAjax() {
		$.ajax({
			type: 'POST',
			url: 'personAutoIncrement.php',
			data: $(this).serialize(),
			dataType: 'json',
			success: function (data) {
					var $cloned = $('.clonedSection li');
					var num = parseInt(data);
					$increment_num.val(num);
					$cloned.each(function(i){
						$(this).find('input').val(num+i);
					})
			},
			complete: function (data) {
				// Schedule the next
				setTimeout(doAjax, interval);
                // just for me to test
                var base_number = 1 + Math.floor(Math.random() * 6);
				var $cloned = $('.clonedSection li');
				$increment_num.val(base_number);
				$cloned.each(function(i){
					$(this).find('input').val(base_number+i);
				})
		}
	});
	}
	setTimeout(doAjax, interval);
	
$('#btnAdd').click(function () {
    var $clones = $('.clonedSection li'),
        num = $clones.size() + 1,
        next_num = parseInt($clones.last().find('input').val())+1,
        $template = $clones.first(),
        newSection = $template.clone().attr('id', 'pq_entry_'+num),
        ident = 'incremend_id_'+num;

    newSection.find('input').attr({
        'id': ident,
        'name': ident
    }).val(next_num);

    $('.clonedSection').append(newSection);

    if (num == 5) $('#btnAdd').prop('disabled', 'disabled');
});

	$('#btnDel').click(function () {
		var num = $('.clonedSection').length; // how many duplicate input fields we currently have
		$('#pq_entry_' + num).remove(); // remove the last element

		// enable the "add" button
		$('#btnAdd').prop('disabled', '');

		// if only one element remains, disable the "remove" button
		if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
	});

	$('#btnDel').prop('disabled', 'disabled');
});