JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset id="buildyourform">
</fieldset>
<input type="button" value="Add a charge" class="add" id="add" />
JavaScript
$(document).ready(function() {
function reIndex(){
$('.test').each(function(index,element){
$(element).children().each(function(){
var inp_elem = $(this).children("input");
if(inp_elem.attr("name").split("_").length == 2)
{
inp_elem.attr("name",inp_elem.attr("name").split("_")[0] + "_" + (index+1));
}
});
});
}
$("#add").click(function() {
var intId = $(".test").length + 1;
var fieldWrapper = $("<div class=\"test row\"/></div>");
var fptno = $("<div class=\"col-md-2\"><input type=\"text\" name=\"ptno_" + intId + "\" class=\"form-control\" /></div>");
var fdesc = $("<div class=\"col-md-2\"><input type=\"text\" name=\"desc_" + intId + "\" class=\"form-control\" /></div>");
var fqty = $("<div class=\"col-md-2\"><input type=\"text\" name=\"qty_" + intId + "\" class=\"form-control\" /></div>");
var famnt = $("<div class=\"col-md-2\"><input type=\"text\" name=\"amnt_" + intId + "\" class=\"form-control\" /></div>");
var removeButton = $("<div class=\"col-md-2\"><input type=\"button\" class=\"remove\" value=\"-\" /></div>");
removeButton.click(function() {
$(this).parent().remove();
reIndex();
});
fieldWrapper.append(fptno);
fieldWrapper.append(fdesc);
fieldWrapper.append(fqty);
fieldWrapper.append(famnt);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
});