jquery clone issue, modifying id changes original selector too

Question

In this code example

var attachmentDeletePhotoModal = $('#attachment-deletion');
attachmentDeletePhotoModal.clone();
attachmentDeletePhotoModal.attr('id', 'attachment-deletion-'+file.unique_text);

I was expecting my document to contain both my new cloned object (with id attachment-deletion-unique_text) as well as $('#attachment-deletion');

but this isn't what I am seeing. I am not calling remove(); on these selectors to my knowledge, so I am led to believe the modifying the attributes of a clone()'d object affects the original as well

but since I thought clone makes a deep copy, this should be happening so something else is wrong. I am modifying id's so maybe this confuses somethings since for a moment there are two objects in the DOM with the same id, maybe?

any insight appreciated

Answer 1

You need to assign cloned element to a variable like this -

var attachmentDeletePhotoModal = $('#attachment-deletion');
var cloned  = attachmentDeletePhotoModal.clone();
cloned.attr('id', 'attachment-deletion-'+file.unique_text);