Here's the HTML snippet I am working with:
<div class="info">
<div class="form-group">
<label class="control-label col-sm-2">Title</label>
<div class="col-xs-10 col-sm-8">
<input id="titleInfo" class="form-control" type="text" placeholder="Title">
</div>
<div class="col-xs-1 col-sm-1">
<button class="btn btn-default remove_field"><i class="fa fa-remove"></i></button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Text</label>
<div class="col-xs-10 col-sm-8">
<textarea id="textInfo" class="form-control" type="text" placeholder="..."></textarea>
</div>
</div>
</div>
In my JSP file, there are several instances of the above code:
<div class="info">
...
</div>
<div class="info">
...
</div>
<div class="info">
...
</div>
What I want to do is change the IDs (titleInfo and textInfo) of each div with the class info in ascending order.
<div class="info">
..<input id="titleInfo1"..
..<textarea id="textInfo1"..
</div>
<div class="info">
..<input id="titleInfo2"..
..<textarea id="textInfo2"..
</div>
<div class="info">
..<input id="titleInfo3"..
..<textarea id="textInfo3"..
</div>
This needs to be done for all instances.
I plan to iterate through by the class info:
var x = 1;
$(".info").each(function() {
//Now, I need to figure out how to update the IDs
x++;
});