Change input name using JQUERY

Question

I am trying to change the entire input name based on the index of the <li> list, but it looks like it doesn't change at all.

 $('.test').click(function() { for(var i=0;i<$("li.songs").length;i++) { var ob = $("li.songs").eq(i).clone(); ob.find('input').each(function() { this.name = this.name+i; alert(this.name); //just checking if does it change }); } }); 

Now the warning displays the correct name that I want, BUT no changes in the name when checking the item AND try to submit the form and show all the POST values.

An example of the expected result before the change:

 <li class="songs"><input type="text" name="song" /></li> <li class="songs"><input type="text" name="song" /></li> <li class="songs"><input type="text" name="song" /></li> 

After the change:

 <li class="songs"><input type="text" name="song1" /></li> <li class="songs"><input type="text" name="song2" /></li> <li class="songs"><input type="text" name="song3" /></li> 

NOTE. I DO NOT WANT an input song named as "ARRAY".

Answer 1

You are cloning an object, so the change is done with the copy, not the original DOM node.

Do not use clone() and everything will be fine. Or do the following:

 $("li.songs input").each(function(i) { $(this).attr('name', $(this).attr('name') + i); }); 

Answer 2

 $("li.songs").each(function(i) { $(this).find('input').attr('name', 'song' + i); });