How to avoid nested elements when inserting inside tinyMCE rich text editor

I use the code below to add a merge field into tinyMce rich text editor:

var wc = `<em class="${t} shortcode" data-unique-id="${rId}" data-control="merge-field">[[${text}]]</em>`;
tinymce.get('document-template').execCommand('mceInsertContent', false, wc);

But when the elements are getting inserted they all get nested within the previously inserted element like this:

<em class="Standard shortcode"
    data-unique-id="ATK8N"
    data-control="merge-field">[[Legal Full Name]]<em class="Standard shortcode"
        data-unique-id="A8TI8"
        data-control="merge-field">[[ Company Address Country]]<em class="DocumentSender shortcode"
            data-unique-id="HCFMG"
            data-control="merge-field">[[ Last Name]]</em>
    </em>
</em>

I want to avoid nesting at all times and ensure that there is never a case when one em element is nested in another, they should always be standalone like this:

<em class="Standard shortcode" data-unique-id="ATK8N" data-control="merge-field">[[Legal Full Name]]</em>
<em class="Standard shortcode" data-unique-id="A8TI8" data-control="merge-field">[[ Company Address Country]]</em>
<em class="DocumentSender shortcode" data-unique-id="HCFMG" data-control="merge-field">[[ Last Name]]</em>

Any TinyMce experts know how this can be achieved?

from How to avoid nested elements when inserting inside tinyMCE rich text editor