JSFiddle - React, Tailwind, and code Playground

by artuc

HTML

<form name="test">
		<div class="formRow">
			<label>Phone Number <span>1</span>:</label>
			<input type="text" name="phoneNumber[]" />
		</div>

		<a href="javascript:void(0);" class="btnAdd">Add [+]</a>
	</form>

CSS

.hidden {
    display: none;
}
/* Bellow is completely unnecessary */
* {
	font-family: Arial;
	font-size: 13px;
}

JavaScript

$(document).ready(function(){
	$('.btnAdd').click(function(){
		base = $('.formRow:first');
		newRow = base.clone().insertAfter($('.formRow:last'));
		newRow.find('input').val('');
		newRow.find('label>span').text(newRow.index('.formRow')+1);
		newRow.append('<input type="button" class="btnRemove" value="Remove"/>');
	});

	$(document).on('click', '.btnRemove', function(){
		$(this).parent().remove();
		//update index
		$('.formRow').each(function(){
			target = $(this).find('label>span');
			target.text($(this).index('.formRow')+1);
		});
	});
});