JSFiddle - React, Tailwind, and code Playground
HTML
<form name="myForm" id="myForm">
<div id="ctrl-group">
<div name="myInput">
<label>Input 1</label>
<input type="text" name="myInputA" />
<input type="text" name="myInputB" />
<input type="text" name="myInputC" />
</div>
</div>
<br />
<input type="button" value="add new input" id="addInput" />
<input type="button" value="delete input" id="deleteInput" />
<input type="button" value="Show all value" id="showVal" />
</form>
JavaScript
$(document).ready(function(){
// adds a new input when "add new input" button is clicked
$("#addInput").on("click",function(){
var $container = $("#ctrl-group"),
len = $container.children().length,
$newInput = $('<div name="myInput"><label>Input ' + (len + 1) + '</label><input type="text" name="myInputA" /><input type="text" name="myInputB" /><input type="text" name="myInputC" />');
$("#ctrl-group").append($newInput);
});
//delete the last input when "delete input" is clicked
$("#deleteInput").on("click",function(){
$("#ctrl-group div:last-child").remove();
});
//show the value of the elements when clicked
$("#showVal").on("click",function(){
var inputVal = "";
$("div[name=myInput]").each(function(){
var buff="",
$this = $(this);
$this.children("input").each(function(){
buff+= (this.value + " ");
});
inputVal += ($this.children("label").text() + ": " + buff + "\n");
});
alert(inputVal);
});
});