I've encountered an issue while trying to increment the id of 2 HTML elements, hwAddition and itemNumber, upon a button click event. The HTML code in question is as follows:
<div id="hwAddition">
<div id="itemNumber" style="text-decoration: underline; font-size: large;">Item #</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="hwDescription" style="text-decoration: underline;">Description</label>
<form:textarea id="hwDescription" type="text"
class="form-control short" path="hwDescription"
name="hwDescription" placeholder="Description" maxlength="100"
rows="2" style="resize: none;" />
</div>
<div class="form-group col-md-4">
<label for="hwSerialNumber" style="text-decoration: underline;">Serial
#</label>
<form:input type="text" class="form-control" path="hwSerialNumber"
name="hwSerialNumber" placeholder="Serial #" maxlength="100" />
</div>
<div class="form-group col-md-4">
<label for="hwModelNumber" style="text-decoration: underline;">Model
#</label>
<form:input type="text" class="form-control" path="hwModelNumber"
name="hwModelNumber" placeholder="Model #" maxlength="100" />
</div>
</div>
<hr />
</div>
The jQuery script responsible for this functionality is provided below:
var count = 1;
$(function() {
$("#hwAddition").attr('id', 'hwAddition' + count);
$("#itemNumber").attr('id', 'itemNumber' + count);
});
$('#hwAdditionButton').click(
function() {
$("#itemNumber" + count).clone().attr('id', 'itemNumber' + (count+1));
$("#hwAddition" + count).clone().attr('id', 'hwAddition' + (count+1))
.insertAfter("#hwAddition" + count);
count++;
});
However, I have observed that although the hwAddition ids are being incremented correctly, the itemNumber ids do not change as expected. This anomaly can be seen in the image link provided here, where after three clicks there are hwAddition1, hwAddition2, hwAddition3, but only itemNumber1, itemNumber1, itemNumber1. Any insights on why the itemNumber id isn't updating would be greatly appreciated.https://i.stack.imgur.com/ilHL8.png