模态中的可重复summernote

Question

这个想法是要有一个名为“菜单变体”的按钮，单击该按钮可以调用带有标题和Summernote文本区域的模式。

在summernote文本区域中输入标题和内容后，单击“保存更改”。

完成此操作后，模态标题“ Title 1”中的按钮名称将更改，单击“添加”后，我可以在下方添加具有相同功能的更多按钮。

问题

返回到某些按钮进行编辑后（即在提交表单之前），模态打开，但再次变空。

dynamic_cast<Metrics&>(Metrics(size))

<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>

重复的JavaScript

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

</script>

我使用了Bootstrap敏锐的主题。