Question: I have this html:

```
<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>

```

Into my jsp I have many of this:

```
<div class="info">
    ...
</div>
<div class="info">
    ...
</div>
<div class="info">
    ...
</div>

```

Now, I would change the id tags: *titleInfo* and *textInfo* of every div with 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>

```

and so on.

I thought to iterate by class *info*:

```
var x = 1;
$(".info").each(function() {
    //Now, I don't know how to change the ids
    x++;       
});

```

Answer: 
You need to update the code to following

```
var x = 1;
$(".info").each(function() {
    var elems = $(this).find(".form-control"); // get all the input elements with class form-control
    elems.each(function() { // iterate over the elements
         $(this).attr("id", $(this).attr("id") + x); // update id
    }); 
    x++;       
});

```

**Update**

```
var x = 1;
    $(".info").each(function() {
        var elems = $(this).find(".form-control"); // get all the input elements with class form-control
        $(elems[0]).attr("id", "titleInfo" + x);
        $(elems[1]).attr("id", "textInfo" + x);
        x++;       
    });

```
Find the below code snippet.

```js
var x = 1;
$(".info").each(function() {
 var ele=$(this).find('.form-control');
  ele.each(function(){
     setId($(this),x)
   })
    x++;       
});

function setId(ele,x){
  ele.attr('id',ele.attr('id')+x)
  }
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<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>
```

This also does the same.

> 
> Script
> 
> 
> 

```
var x = 1;
$(".info").each(function() {
 var ele=$(this).find('.form-control');
  ele.each(function(){
      $(this).attr('id',$(this).attr('id')+x)
   })
    x++;       
});

```