Content loaded via html and used in dialog becomes duplicated

[Mathachew]

I have a table with a list of users and some of the information. When selecting a user, a sidebar is displayed with more detailed information about that user, pulled via ajax. Among the content that is loaded, one of the buttons will bring up a modal whose content is also loaded in the sidebar. Once I close the modal, pull up the next user and try to bring up the same modal, it comes up fine. However, I am unable to close the modal by calling $().dialog('destroy'). Upon inspecting the html, I noticed that the element that was loaded existed twice since the modal moves the element outside of the parent in which it was originally contained.

[Scott González]

I don't think you've described a bug. Please provide a reduced test case showing your problem.

[Mathachew]

Replying to scott.gonzalez:

I don't think you've described a bug. Please provide a reduced test case showing your problem.

​http://jsbin.com/ovasab/edit#javascript,html

This is a simplified version of what we're doing, but the result is the same. If I click the link to open multiple modals of the same content, I can then close any additional modals that I was unable to close previously. However, doing this results in multiple elements with the same id. Thanks.

[Scott González]

This is expected behavior. The dialog has to move in the DOM for z-index to work properly. You're leaving the dialog in the DOM and then loading new content with the same id and creating another dialog.