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

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

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.