Как я могу настроить динамически добавляемые редакторы Ace без создания в результате дополнительного HTML?

В настоящее время я могу динамически создать новый редактор Ace Editor и добавить его в контейнер div следующим образом:

editorsOnScreen++;
$("#container").append(`<div class="questionContainer w-100" 
                        id="questionContainer_` + editorsOnScreen + `" >
                            <div class="editor" id="editor_` + 
                             editorsOnScreen + `">//Code Here</div>
                        </div>`);

Затем я могу настроить эти редакторы Ace по отдельности, указав их идентификатор с помощью возрастающей переменной:

var editor = ace.edit("editor_" + editorsOnScreen);
//Perfrom configuration here.

Если пользователь покидает страницу, я хочу иметь возможность сохранить все редакторы на экране, чтобы снова показать их в следующий раз, поэтому я использую localStorage, чтобы сохранить innerHTML из container div, где они находятся. хранится:

localStorage.setItem("divHtml", $("#container").html();

Я делаю это с целью замены HTML-кода container div на ранее сохраненный HTML-код при следующей загрузке страницы. Вот тут-то и возникает проблема. Я ожидаю, что HTML, сохраненный в ключе divHTML, будет следующим:

<div class="questionContainer w-100" id="questionContainer_` + editorsOnScreen + `" >
    <div class="editor" id="editor_` + editorsOnScreen + `">//Code Here</div>
</div> 

Но вместо этого это выглядит точно так (я использую три точки, потому что они продолжаются вместо строк, и эти X действительно появляются, когда я использую console.log):

<div class="questionContainer w-100" id="questionContainer_` + editorsOnScreen + `" >
    <div class="editor ace_editor ace-vibrant-ink ace_dark" id="editor_2"> 
        <textarea class="ace_text-input" wrap="off" autocorrect="off" 
        autocapitalize="off" spellcheck="false" style="opacity: 0;"> 
        </textarea><div class="ace_gutter" aria-hidden="true"><div 
        class="ace_layer ace_gutter-layer ace_folding-enabled"></div><div c 
        class="ace_gutter-active-line"></div></div><div class="ace_scroller" 
        style="left: 0px; right: 0px; bottom: 0px;"><div 
        class="ace_content"><div class="ace_layer ace_print-margin-layer"> 
        <div class="ace_print-margin" style="left: 4px; visibility: hidden;
        ...
        overflow: 
        visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        </div></div></div></div> 

Однако я обнаружил, что получаю именно те результаты, которых ожидаю, когда не использую JavaScript или jQuery для настройки редакторов.

Почему это произошло? Как я могу сохранить HTML-код container div, все редакторы которого являются дочерними, чтобы я мог легко заменить его HTML сохраненными данными при следующей загрузке страницы?

Спасибо.