jquery - Changing the id value of a cloned html element -

i don't know why id of cloned element doesn't change. here's code i'm working on.

 c.children('#response1').attr('id','response'+ (++inputs) ); 

jsfidde

the input element trying select not direct child of row tag. children() function selects direct children. can use find() function non-direct descendant.

you can @ updated fiddle show id when click on input textbox:

http://jsfiddle.net/9uzcv/3/

by way, have error in code. if add 3 rows (or more) , remove row not last row, , add row, duplicate ids. reason decrement inputs counter when remove row, if not last row. e.g.:

add 2 rows.

response1 response2  response3 

now delete second row.

response1 response3 

add row

response1 response3 response3  (this new one. duplicate id) 

the solution either not decrement inputs (unless last row, optional). if need have sequentially numbered items, you'll have re-number them whenever input removed position except end.