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
//get the form element
var myForm = document.getElementById("myForm"),
//gets the div-container of the inputs
ctrlGroup = document.getElementById("ctrl-group"),
//get the add button
addButton = document.getElementById("addInput"),
//get the delete button
deleteButton = document.getElementById("deleteInput"),
//get the show value button
showButton = document.getElementById("showVal");
// adds a new input when "add new input" button is clicked
addButton.onclick = function(){
var newInput = document.createElement("div");
newInput.setAttribute("name","myInput");
newInput.innerHTML = '<label>Input ' + (ctrlGroup.childElementCount + 1) + '</label><input type="text" name="myInputA" /><input type="text" name="myInputB" /><input type="text" name="myInputC" />';
ctrlGroup.appendChild(newInput);
};
//delete the last input when "delete input" is clicked
deleteButton.onclick = function(){
ctrlGroup.removeChild(ctrlGroup.lastElementChild);
};
//show the value of the elements when clicked
showButton.onclick = function(){
var inputA = document.getElementsByName("myInputA"),
inputB = document.getElementsByName("myInputB"),
inputC = document.getElementsByName("myInputC"),
inputStr = "",
i=0,
len=ctrlGroup.childElementCount;
for(;i<len;i++){
inputStr += ("INPUT" + i +": " + inputA[i].value + " " + inputB[i].value + " " + inputC[i].value + "\n");
}
alert(inputStr);
};