Повторяемая летняя заметка в модале

Question

Идея состоит в том, чтобы иметь кнопку с названием «Разнообразие меню», которая при нажатии вызывает модальный текст с заголовком и текстовой областью summernote.

После постоянного заголовка исодержание в текстовой области summernote Я нажимаю «Сохранить изменения».

После того, как это сделано, имя кнопки изменяется в названии заголовка "Название 1" в модальном режиме, и я могу добавить дополнительные кнопки ниже ста же функциональность при нажатии «Добавить».

ПРОБЛЕМА

После того, как я вернусь к некоторым изкнопки для редактирования (то есть перед отправкой формы), модальное окно открывается, но снова становится пустым.

<div class="kt-repeater">
<div data-repeater-list="menulist">
    <div data-repeater-item class="kt-repeater__item">
        <div class="input-group">

            <div class="kt-section__content kt-section__content--border">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-outline-brand"
                    data-toggle="modal" id="buttonBreakfast"
                    data-target=".bd-example-modal-xl">Menu
                    varieties</button>
                <!-- Large Modal -->
                <div class="modal fade bd-example-modal-xl" tabindex="-1"
                    role="dialog" aria-labelledby="myLargeModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <div class="col-xl-6">
                                    <div class="form-group">
                                        <label>Title:</label>
                                        <input type="text"
                                            class="form-control"
                                            name="variereeretieOneTitle"
                                            id="variereeretieOneTitle"
                                            placeholder="Enter name">
                                    </div>
                                </div>
                                <button type="button" class="close"
                                    data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="col-lg-12 col-sm-12 col-md-12">
                                    <div class="form-group  validate is-valid"
                                        name="what_menu_item">
                                        <label class="col-form-label">Menu
                                            varieties</label>
                                        <textarea
                                            class="form-control summernote"
                                            name="variereeretieOneContent"></textarea>
                                        <div class="valid-feedback">Success!
                                            You've done it.</div>
                                        <span
                                            class="form-text text-muted">Write
                                            an article</span>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button"
                                    class="btn btn-outline-brand"
                                    data-dismiss="modal">Close</button>
                                <button type="button"
                                    {{-- onclick="changeBtnName(getElementById('variereeretieOneTitle').value);" --}}
                                    class="btn btn-outline-brand"
                                    data-dismiss="modal">Save
                                    changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="kt-separator kt-separator--space-sm"></div>
        </div>
    </div>
    <div class="kt-repeater__add-data">
        <span data-repeater-create="" class="btn btn-info btn-sm"> <i
                class="la la-plus"></i> Add </span>
    </div>
</div>

<script>
    function changeBtnName(buttonName) {
    var el = document.getElementById('buttonBreakfast');
        el.textContent = buttonName;
  }

</script>

Javascript для повторения:

"use strict";
// Class definition

var KTRepeaterDemo = function () {

    // Private functions
    var demo = function () {
        $('.kt-repeater').each(function () {
            $(this).repeater({
                show: function () {
                    $(this).slideDown();
                },
                // Enable the option below to have a 2-step remove button
                /*
                hide: function (deleteElement) {
                    if(confirm('Are you sure you want to delete this element?')) {
                        $(this).slideUp(deleteElement);
                    }
                },
                */
                isFirstItemUndeletable: true
            });
        });
    }

    return {
        // public functions
        init: function () {
            demo();
        }
    };
}();

jQuery(document).ready(function () {
    KTRepeaterDemo.init();
});

var clicked_button_to_open_modal;
var container;

$(document).on('click', '.modal .btn.btn-outline-brand', (e) => {
    var modal = $(e.target).closest('.modal');
    var title_text = modal.find('input#variereeretieOneTitle').val(),
        summernote = modal.find('textarea').summernote('code');
    container.append(`
        <input type="hidden"
         name="menuItems[${container.index()}][${clicked_button_to_open_modal.index()}][title]" value="${title_text}" />
        <input type="hidden"
         name="menuItems[${container.index()}][${clicked_button_to_open_modal.index()}][value]" value="${summernote}" />
    `);
    // modal.find('form')[0].reset();
    modal.find('input#variereeretieOneTitle').val('');
    modal.find('textarea').text('');
    clicked_button_to_open_modal.text(title_text);
    clicked_button_to_open_modal = null;
    modal.find('textarea').summernote('code', '');
    // console.log(container);
})

$(document).on('click', '.kt-repeater__item button[data-toggle]', (e) => {
    clicked_button_to_open_modal = $(e.target);
    container = clicked_button_to_open_modal.closest('.kt-repeater__item');
    // $('input#variereeretieOneTitle').val($(`name="menuItems[${container.index()}][${clicked_button_to_open_modal.index()}][title]"`).val());


    $('.modal textarea').summernote('destroy');
    $('.modal textarea').summernote();

    // $('.modal textarea').summernote('code', $(`name="menuItems[${container.index()}][${clicked_button_to_open_modal.index()}][value]"`).val());
})

Я использовал острую тему Bootstrap.