Show template content from the master data in the modal

Question

I cannot display the content of the letter template that I have created in the master data. I want to display a popup modal to preview the letter. This preview displays the letter template along with the input that has been filled in according to the form. However, when the modal popup opens, the letter content is missing. If I open the details in the master data, the template appears.

This is the script of the master data

$(document).ready(function() {
    // alert("a")
    // function appendform(){
    //     let content =
    //     `
    //     <div class="row dynamic-form" id=''>
    //             <div class="col-md-6">
    //                 <label>Nama Form</label>
    //                 <input type="text" class="form-control"  name="no_surat" placeholder="Masukkan nomor surat...">
    //             </div>
    //             <div class="col-md-6">
    //                 <label>Tipe Form</label>

    //                     <select class="form-control"name="status" id="status">
    //                         <option hidden>Pilih tipe</option>
    //                         <option value="text">text</option>
    //                         <option value="number">date</option>
    //                         <option value="date">number</option>
    //                     </select>

    //             </div>
    //         </div>
    //     `
    //     $("#append_form").append(content)
    // }

    // $("#previewTemplate").on("click", function(){
    //     $("#modal-default").modal("show")
    // })

    const openModalButton = document.getElementById("previewTemplate");
    const myModal = document.getElementById("modal-default");
    const closeModalButtons = myModal.querySelectorAll("[data-dismiss='modal']");

    openModalButton.addEventListener("click", function() {
        myModal.classList.add("show");
        // console.log("init")
        let postData = {};

        let isArray = [];
        $(".dynamic-form").each(function() {
            let isObject = {};
            let input = $(this).find('input').val();
            let select = $(this).find('select').val();

            isObject.nm_form = input;
            isObject.type = select;

            isArray.push(isObject);
        });

        let nm_template = $("#nm_template").val();
        let status = $("#status").val();
        let paragraf_awal = $("#paragraf_awal").val();
        let paragraf_akhir = $("#paragraf_akhir").val();
        let tipe_surat = $("#tipe_surat").val();
        let isTable = $("#isTable").val();
        // console.log(isTable);

        postData.nm_template = nm_template;
        postData.status = status;
        postData.paragraf_awal = paragraf_awal;
        postData.paragraf_akhir = paragraf_akhir;
        postData.tipe_surat = tipe_surat;
        postData.isTable = isTable;
        postData.dynamic_form = isArray;


        // console.log(console.log(isTable));
        let dynamic_content = null;
        let header = null;
        let body = null;
        if (isTable == 1) {
            header = '<tr><td>No.</td>'
            body = '<tr><td>1</td>'
            for (let i in isArray) {
                header += `<td>` + isArray[i].nm_form + `</td>`;
                body += `<td></td>`;
            }

            header += '</tr>';
            body += '</tr>';

            dynamic_content = `<table style="width: 100%; " id="table_isi">
                            <thead>
                                ` + header + `
                            </thead>
                            <tbody>
                                ` + body + `
                            </tbody>
                        </table>`;

        } else {
            let forms = "";
            for (let i in isArray) {

                if (isArray[i].type == 'spacing') {
                    forms += `
                        <tr>
                            <td>` + isArray[i].nm_form + `:</td>
                            <td style="padding:30px 10px 20px 30px"></td>
                            <td></td>
                        </tr>`;
                } else {
                    forms += `
                        <tr>
                            <td>` + isArray[i].nm_form + `</td>
                            <td style="padding:0px 10px 0px 20px">:</td>
                            <td></td>
                        </tr>`;
                }
            }

            dynamic_content = `
                    <table>
                        ` + forms + `

                    </table>`;

        }

        // console.log(header);
        // return false;

        let surat_1 = `
            <div id="surat">

                <div style='margin-top: 1rem'></div>
                <div class="page" style="page-break-after: always">
                    <div>
                        <h2 style="font-size: 10pt!important; font-weight: 700;">` + nm_template + `</h2>
                    </div>


                    <div>
                        <p style=" float: right;">` + getDateNow() + `</p>
                    </div>

                    <br>

                    <div>
                        <table>
                            <tr>
                                <td>Nomor</td>
                                <td style="padding-left: 30px;">:</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>Hal</td>
                                <td style="padding-left: 30px;">:</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>

                    <br>
                    <br>

                    <div id="paragraf_awal_s" style="text-align: justify">
                        ` + paragraf_awal + `
                    </div>

                    <br>

                    <div>
                        ` + dynamic_content + `

                        <br>

                        <div style="text-align: justify">
                            ` + paragraf_akhir + `
                        </div>

                        <br>

                        <div style="float: right; text-align: left;">
                            <div>Dekan, </div>
                            <br>
                            <br>
                            <br>
                            <div>Hernandi Sudjono</div>
                            <div>3411171119</div>
                        </div>

                        <div style="text-align: left;    margin-top: 121pt;">
                            <div>Tembusan: </div>
                            <div style="padding-left: 10px!important">1. Dekan Fakultas Vokasi Unesa (sebagai laporan)</div>
                            <div style="padding-left: 10px!important">2. Koordinator Prodi D4 Informatika Fakultas Vokasi Unesa</div>
                        </div>

                    </div>
                </div>


            </div>
             `;


        let surat_2 = `
            <div id="surat">

            <div style='margin-top: 1rem'></div>
            <div class="page" style="page-break-after: always">
                <div>
                    <h2 style="font-size: 10pt!important; font-weight: 700;">` + nm_template + `</h2>
                </div>
                <br>
                <div>
                    <h2 style="font-size: 10pt!important; font-weight: 700; text-align: center;">SURAT KETERANGAN</h2>
                    <div style="text-align: center;">Nomor : 0918209749</div>
                </div>

                <br>
                <br>

                <div id="paragraf_awal_s" style="text-align: justify">
                ` + paragraf_awal + `

                </div>

                <br>

                <div>
                    ` + dynamic_content + `
                    <br>

                    <div style="text-align: justify">
                    ` + paragraf_akhir + `
                    </div>

                    <br>

                    <div style="float: right; text-align: left;">
                        <div>Dekan, </div>
                        <br>
                        <br>
                        <br>
                        <div>Hernandi Sudjono</div>
                        <div>3411171119</div>
                    </div>

                    <div style="text-align: left;    margin-top: 121pt;">
                        <div>Tembusan: </div>
                        <div style="padding-left: 10px!important">1. Dekan Fakultas Vokasi Unesa (sebagai laporan)</div>
                        <div style="padding-left: 10px!important">2. Koordinator Prodi D4 Informatika Fakultas Vokasi Unesa</div>
                    </div>

                </div>
            </div>


            </div>

        `;


        let content = null;
        if (tipe_surat == 1) {
            content = surat_1;
        } else {
            content = surat_2;
        }

        let contentSurat = document.getElementById("mbSurats");
        contentSurat.innerHTML = content;
        myModal.style.display = "block";
    });

    closeModalButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            myModal.classList.remove("show");
            myModal.style.display = "none";
        });
    });

    let id_param = `{{ request()->route('id') }}`;

    if (id_param != 0) {

        let tipe_surat = `{{ $data['count_template'] > 0 ? $data['template_surat']->type : '' }}`;
        let status = `{{ $data['count_template'] > 0 ? $data['template_surat']->status : '' }}`;
        let isTable = `{{ $data['count_template'] > 0 ? $data['template_surat']->is_table : '' }}`;


        console.log(tipe_surat, status, isTable)

        $("#tipe_surat").val(tipe_surat).trigger("change")
        $("#isTable").val(isTable).trigger("change")
        $("#status").val(status).trigger("change")


    }

})

This is the script of the create letter form

$(document).ready(function() {
    // alert("a")
    $("#save-naskah").on("click", function() {
        saveInputSurat();
        // alert("m")
    })









    function saveInputSurat() {
        let isObject = {};

        isObject.nomor_surat = $("#nomor_surat").val();
        isObject.allData = alltemplateform();
        isObject.no_induk = `{{ session('user')['no_induk'] }}`;
        isObject.jenis_surat = `{{ $data['data_template']->nama_template }}`;
        isObject.status = "Dalam Penanganan";
        // console.log(isObject);

        $.ajax({
            url: '{{ route('surat.savesurat') }}',
            type: 'POST',
            data: isObject,
            success: function(response) {
                if (response.code) {
                    window.location = `{{ route('surat.index') }}`
                }
            },
            error: function(xhr) {
                console.log(xhr.responseText);
            }
        });
    }

})

Which part should I change or add?