Currently I have 10 modals in a page. So, I want to make sure, that each time the modal is loaded it is reset to default. (exactly similar to the initial one ) Let me show you some code.
Code for a modal named goal:
it also dynamically loads a field, where we could draw lines and move icons.
When I use the .html to copy and then paste the content. I loose out functionality.
Like I am unable to drag images. Also, I am unable to make ajax calls through buttons.
I'm not sure how your images functionality works, what they suppose to do, how they're initialized, and what is the method used to drag them. I would go with html() (like in my last demo) but it need some loops, since you have more than one modal.
all modal is stored in a modalFreshContents array, with modal id as key. Then you can restore each modal depends on its id.
The other thing is about initialization of your images after restore. You have to handle that on your own, since I have no idea how that works (images functionality). In demo I have used jQuery.draggable, so you can get the idea of how to reinitialize plugin
And to make ajax calls through modals buttons you would need to use event delegation (like in demo)