A number of TinyMCE on button click on is initialized and appended however why solely final one is writeable?

I’m utilizing a button click on so as to add TinyMCE dynamically. The whole lot is working besides just one concern is that solely the final one is writeable.
Under is my HTML

HTML

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

and that is my Javascript to create and initialize TinyMCE wp.editor.initialize(‘editor_id’);

Javascript

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

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

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

I even have enqueued the scripts for editor.

PHP enqueue script

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

I’m not a lot conversant in WordPress TinyMCE API.