Multiple TinyMCE on button click is initialized and appended but why only last one is writeable?

Question

I am using a button click to add TinyMCE dynamically. Everything is working except only one issue is that only the last one is writeable. Below is my HTML

HTML

<div id='add_content_box'></div>
<button id='add_more_content_block' class='button'>Add more content</button>

and this is my Javascript to create and initialize TinyMCE wp.editor.initialize('editor_id');

Javascript

var counter = 1;
document.getElementById('add_more_content_block').addEventListener('click', function(e) {
    e.preventDefault();
    var editor_id = "editor_"+counter;

    // document.getElementById('wp-editor_0-editor-container').innerHTML += `<textarea name="_hus_landing_page_content[`+counter+`]" id="editor_`+counter+`" ></textarea>`
    document.getElementById('add_content_box').innerHTML += `<div class="wp-`+editor_id+`-editor-container">
        <textarea class="wp-editor-area" name="_hus_landing_page_content[]" id="`+editor_id+`" ></textarea>
    </div>`;

    wp.editor.initialize(editor_id,{
        mediaButtons: true,
        tinymce: true,
        quicktags: true 
    });
    
    counter++;
});

I also have enqueued the scripts for editor.

PHP enqueue script

add_action( 'admin_enqueue_scripts', 'load_admin_scripts');
function load_admin_scripts() {
   wp_enqueue_editor();
}

I am not much familiar with WordPress TinyMCE API.

Answer 1

Ok, with many hours of debugging and I finally came to know why it was not working. So everything is supposed to work the way it should be but there was a minor mistake in my JavaScript.

Previous JavaScript

var counter = 1;
document.getElementById('add_more_content_block').addEventListener('click', function(e) {
    e.preventDefault();
    var editor_id = "editor_"+counter;

    
    document.getElementById('add_content_box').innerHTML += `<div class="wp-`+editor_id+`-editor-container">
        <textarea class="wp-editor-area" name="_hus_landing_page_content[]" id="`+editor_id+`" ></textarea>
    </div>`;

    wp.editor.initialize(editor_id,{
        mediaButtons: true,
        tinymce: true,
        quicktags: true 
    });
    
    counter++;
});

The only problem with the above code innerHTML. Everytime you call innerHTML, it will reset all of your HTML back to the original condition. So to avoid this, we have to append. So my final solutions is this

Final Javascript

var counter = 1;
document.getElementById('add_more_content_block').addEventListener('click', function(e) {
    e.preventDefault();
    var editor_id = "editor_"+counter;


jQuery("#add_content_box").append('<textarea id="'+editor_id+'" name="content_block[]" class="form-control"></textarea>');

    wp.editor.initialize(editor_id,{
        mediaButtons: true,
        tinymce: true,
        quicktags: true 
    });

    counter++;
});

Everything else will be the same. I hope that will help someone in the future.