I'm working on a MVC application and I have built a pop-up system as well. The structure of pop-up is as shown below

<div class="main-content" id="main-content">
    <main role="main" class="">
        @RenderBody()
    </main>
</div>
<div class="notifications-container"></div> <!–– You can ignore ––>
<div class="overlay-modal" id="overlay-modal"></div> <!–– Overlay on the screen (To dark a bit and adds blur) ––>
<div class="modal" id="modal">
    <div> <!–– Pop-up content (Usually Html) ––>
       <button class="modal-close-btn" id="close-btn"><i class="fa fa-times" title="Close"></i></button>
    <!–– Dynamically I'm appending html in here to show the pop-up ––>
    </div>
</div>

Now the problem with this approach is that maintaining pop-up html. For example if I have to show some html as pop-up I having to do something like below.

1. Create the HTML(UI) to show in the pop-up.
2. Hide it by setting up display to none.
3. When the pop-up is triggered, Clone the hidden html and appending it to the #modal div. When the pop up is closed I'm removing the appended item from #modal.
4. Whenever it triggers, repeating the 3rd step.

I'm finding a bit difficult to maintain HTML in this approach. When the pop-up is up, there will be a duplicate html in the DOM. I had to clone the hidden elements because if I dont, I will lose the UI I need to show if I want it second time (As I would be removing it from the DOM and append it into #modal).

Please suggest any techniques to improve this approach or a better solution altogether. Please comment if you have any questions. Thanks in advance.