Goal: I am trying to duplicate a <div>
X numbers of times based on a number input, and increment a label starting at the number 1
For example: User enters the number 5 into an input field. On change, this then replicates a <div>
5 times. Within this div, there is a single label, and this label will increment (within div #1 will be Label #1, within div #2 will be Label #2, etc.)
The following code replicates the div the number of times I need it to, but I'm not able to increment the label.
Within the code, <label> Crack #GOES HERE</label>
"#GOES HERE" should be the increment number (#1, #2, etc.)
<input type="number" class="form-control" id="nbchambre" name="nbchambre" onchange="myFunction()">
<div id="content">
</div>
<script>
function myFunction(){
var n = Number(document.getElementById("nbchambre").value);
var content = document.getElementById('content');
content.innerHTML="";
for(var count = 1; count < n+1; count++){
var div = document.createElement('div');
div.innerHTML = '<div class="form-group"><label>Crack #GOES HERE</label><input type="number" name="email_field" id="email_field" placeholder="Crack Length in Inches" value="" class="form-control" /></div>';
content.appendChild(div);
}
}
</script>