JSFiddle - React, Tailwind, and code Playground

HTML

Number to start increment from:
<input id="increment_num" name="increment_num" placeholder="" type="text" /></br>
Values:
<ul id="pq_entry_1" class="clonedSection">
			<li>
				<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>

JavaScript

$(document).ready(function () {
     //generate random number, cant get it to work here
      setInterval(function() {
      var number = 1 + Math.floor(Math.random() * 6);
      $('#increment_num').text(number);
    },
    1000);
        
	$('#btnAdd').click(function () {

        
		var num = $('.clonedSection').length;
		var newNum = new Number(num + 1);
		var nextAutoIncrement = $('#result').val();

		var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);
		newSection.children(':first').children(':first').attr('id', 'increment_id_' + newNum).attr('name', 'increment_id_' + newNum);
		newSection.insertAfter('#pq_entry_' + num).last();
		
		event.preventDefault();
		$('#btnDel').prop('disabled', '');

		if (newNum == 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');

});