Create an instantaneous modal, and Depóis destroy it

Question

I have in my system many parts where the user double-click on a certain line, and is loaded the corresponding action within a Bootstrap modal.

In the current method I use, there are three modal elements indicating:

#primary-layer-modal

#secondary-layer-modal

#third-layer-modal

These three elements are already loaded empty with the interface, and are waiting to be called and filled.

What I want to do is somehow 'instantiate' an element (at the time an ajax request is made) that can be invoked in the instance, and be destroyed later, because in the current mode, these modals are unnecessary waste.

What I thought as a solution:

Leave only one div in index identifying:

<div id="residual-elements"></div>

And request the rendering of a modal to my framework and return along with the reply json:

$modal = new \vidbModel\modalElements();
$elemento = $modal->background('static')->footer('close|submitFakeForm')->title('Titulo da modal')->body($html)->modal(0);
echo json_encode($elemento);

And use of:

$('#residual-elements').append($respostaAjax);

To insert the modal in the page.

And use of:

$('#residual-elements').empty();

To destroy the modal after its use.

Well, this doesn’t seem like the best way to do it because in certain cases I would have a very large json response brought from the server.

I don’t have much practice with JS, and I think with it I’ll have a better solution.

The question is:

How would it be logical for me to have an 'element creator' instantiated client side that I don’t need to ask PHP for the element in question?

Or,

What would be a possible way to instantiate an element that could be constantly reused client side ?

OBS: 1 - My JS is very weak.

2 - The environment I am trying to accomplish this is to decrease the server consumption in transiting with large responses in requests.