Question

Is there an issue with updating ID’s of cloned elements? I think my syntax is correct here but it’s not updating.

function addQuestion(){
// Clone the first question Container and give it a new ID
$('#questionContainer0').clone().attr('id','questionContainer'+currentQuestion).appendTo('#questionArea');


// Assign the new ID to the text area field (This is not working)
$('#question0').attr('id','asdasd');
var test = $('#question0').attr('id');
alert(test);
}

Question0 is a child element (textarea) of the original cloned questionContainer0 (div)

Answer 1

change

$('#question0').attr('id','asdasd');

to

$('#question0', '#questionContainer'+currentQuestion).attr('id','asdasd');

this would restrict your search inside the cloned elements only.

And to be more sure, you should do that before even appending the cloned elements in the DOM, since IDs are supposed to be unique in the DOM.

function addQuestion(){
// Clone the first question Container and give it a new ID
var newElement = $('#questionContainer0').clone().attr('id','questionContainer'+currentQuestion);
newElement.find('#question0').attr('id','asdasd');
newElement.appendTo('#questionArea');

}