jQuery - сделать элемент последним в DOM (перед закрытием body) даже после динамически генерируемых элементов

tl;dr: Как заставить элемент DOM, который становится видимым обработчиком клика, быть последним элементом перед закрытием body, даже если добавляются динамически генерируемые элементы?

По сути, я хочу, чтобы клик, который открывает элемент, также перемещал его в DOM, чтобы он был последним перед закрытием body даже после того, как были добавлены некоторые динамические элементы.

Моя проблема связана с модалом, который открывается внутри другого модала, в то время как на одной странице есть несколько модалов. Загвоздка в том, что подмодалы существуют в DOM при загрузке страницы, в то время как основные модалы инстанцируются при нажатии (подмодалы используют другой код для генерации, в то время как основные используют jQuery UI dialog).

Если вы открываете модал, а затем открываете субмодал, то все в порядке. Если открыть второй модал, затем закрыть его, то при повторном открытии первого модала подмодал не появится, так как он скрыт под вторым модалом. Если я добавляю эти субмодалы в тело, помещая их после всех сгенерированных модалов, они отображаются нормально (но это создает другие проблемы). Несмотря на то, что кажется, что это не проблема с z-индексом (я пробовал все, что связано с этим, безрезультатно), похоже, что это связано с тем, где эти модалы расположены в DOM.

Код может быть более понятным:

Вот как выглядит html при загрузке страницы:

<div id='submodal_1' class='submodal'>foo</div>
<div id='submodal_2' class='submodal'>bar</div>
</body>

После того, как вы нажмете, чтобы открыть первое основное модальное окно:

<div id='submodal_1'>subfoo</div>
<div id='submodal_2'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
</body>

После того, как вы нажмете, чтобы открыть подмодальное окно этого модала, я должен переместить подмодальное окно ниже основного модала, иначе оно не появится (и опять же, z-index не влияет на эту блокировку):

$('#submodal_1').insertAfter('#primary_modal_1');

В этот момент, если вы закроете #primary_modal_1, оно будет скрыто, но все еще находится в DOM. Если вы откроете второй, то код будет выглядеть так:

<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:none'>foo</div>
<div id='submodal_1' class='submodal'>subfoo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:block'>bar</div>
</body>

В этот момент, если вы снова откроете первый основной модал и попытаетесь открыть его субмодал, то субмодал не появится. Однако если переместить субмодаль ниже последнего основного модала, например, так:

<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:none'>bar</div>
<div id='submodal_1' class='submodal'>subfoo</div> //<-- moved this line
</body>

Субмодаль появится правильно. Я хочу убедиться, что субмодалы всегда будут последними в DOM, независимо от того, сколько первичных модалов добавлено.