Make TinyMCE 6 work after duplicating dom elements

Question

First of all, I understand I'm working in a language (jQuery) that is quickly dying, but it's what this project was built with, and I can't re-do the whole thing so here we are.

I have this jquery function that I'm using to duplicate a set of dom elements:

function duplicateElement($element, dataAttributeName) {
    var newUniqueId = 'wiz-chunk-' + generateUniqueId(); // Generate a new unique ID

    //Clone the element
    var $clonedElement = $element.clone(true, true);
    $clonedElement.insertAfter($element).addClass('newly-added');
    setTimeout(() => $clonedElement.removeClass('newly-added'), 3000);

    $clonedElement.find('.wiz-wysiwyg').each(function() {
        var uniqueTextareaId = newUniqueId + '-wiz-wysiwyg'; // New unique ID for the textarea
        $(this).attr({
            'id': uniqueTextareaId,
            'name': newUniqueId + '_wysiwyg_field'
        });
        // Ensure the textarea specifically is visible for TinyMCE initialization
        //$(this).css('display', 'block');
    });

      
    setTimeout(function() {
        // Update IDs within the cloned element to reflect the new unique ID
        updateElementIds($clonedElement, $element.attr('id'), newUniqueId);

        // Reindex data attributes and initialize necessary components
        reindexDataAttributes(dataAttributeName);
        initializeChunkSortables();
        initializeChunkTabs();

        // Initialize TinyMCE on the cloned element
        builder_init_tinymce($clonedElement);
    }, 1000); 
}

(The display: block style is commented out as a failed attempt to fix)

The dom elements contain one or more TinyMCE 6 instances.

Here is my TinyMCE init function:

//Init TinyMCE on each .wiz-wysiwyg element
function builder_init_tinymce($optionalElement) {
    // If an optional jQuery element is provided, find TinyMCE instances within it; otherwise, use the global selector
    var selector = $optionalElement ? '#' + $optionalElement.attr('id') + ' .wiz-wysiwyg' : '.wiz-wysiwyg';

    tinymce.init({
            selector: selector,
etc, etc....

The init function works fine and well on page load, but when trying to use it on a cloned element, it's loading the editor interface, but not the actual box where the content is. It's just a blank interface. If I click on the <>code button, I can clearly see the content HTML in there and I can see it within the <textarea> underlying as well.

I'm pulling my hair out trying to get it to work, and I'm beginning to think maybe this isn't possible with jQuery on V6?

Any help or tips is appreciated.

Answer 1

As is typically the case, I solve it shortly after resorting to StackOverflow!

This issue was here:

 $(this).attr({
        'id': uniqueTextareaId,
        'name': newUniqueId + '_wysiwyg_field'
    });

Dynamically giving the textarea a new name with a unique ID was not the way to go. Instead, I left the name field non-unique (wysiwyg-field) and only updated the new textarea ID and that seemed to do it.