jcadima
4/25/2017 - 4:16 PM

Create new input field on click

Create new input field on click


http://jsbin.com/hibahakeyu/1/edit?html,output



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<script type="text/javascript">
var counter = 2;
function addNewItemField(divName) {
  var newDiv = document.createElement("div");
  newDiv.id = "item_listing_" + counter;
  newDiv.innerHTML  = "<label for=\"item_" + counter + "\">Item: </label><br />";
  newDiv.innerHTML += "<input type=\"text\" id=\"item_" + counter + "_category\" list=\"list_categories\" name=\"items[]\">";
  newDiv.innerHTML += "<input type=\"number\" id=\"item_" + counter + "_amount\" mine=\"0.00\" step=\"0.01\" value=\"0.00\" name=\"amounts[]\"><br />";
  document.getElementById(divName).appendChild(newDiv);
  counter++;
}
</script>

</head>
<body>
<input type="button" value="Add" onclick="addNewItemField('div1')" />
<div id="div1" ></div>
</body>
</html>