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 should really do this server side, within the loop control you have that generates those blocks. For the sake of answering, here you go.

```
$(".info").each(function(index) {

    var $title = $(this).find("#titleInfo");
    var $text = $(this).find("#textInfo");
    $title[0].id += (index+1);
    $text[0].id += (index+1);
});

```

Take a [look at this demo](http://jsfiddle.net/yndymm9t/) as well.
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++;       
});

```