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

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.