Select2 Shows Twice in Modal the First Time It Opens

I have the modal where this modal show the content dynamically by using js. the modal html is like this:

<div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">

            <div class="modal-header" style="margin-bottom: 10px;">
                <b class="modal-title" id="modalTitle">Modal Title</b>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div id="modalBody" class="modal-body pt-0">
                @* Modal content will be injected here *@
            </div>
        </div>
    </div>
</div>

The modal then appends content inside the “modalBody” using the template I provided. One example of a template for the content body is:

<div id="templateModalEducation">
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <div class="form-group">
                <label class="Requiredinput">Year</label>
                <input type="text" class="form-control edu-year">
                <span id="edu-year-validation" class="text-validation"></span>
            </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="form-group">
                <label class="Requiredinput">Level</label>
                <select class="form-control select2normalWithouClear edu-level"
                    data-placeholder="Select Education Level">
                    <option></option>
                    @if (Model.EduLevelDropdownList != null)
                    {
                        foreach (var level in Model.EduLevelDropdownList)
                        {
                            <option>@level.CodeName</option>
                        }
                    }
                </select>
                <span id="edu-level-validation" class="text-validation"></span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="form-group">
                <label class="Requiredinput">Institution Name</label>
                <select class="form-control select2normalWithouClear edu-instituteName"
                    data-placeholder="Select Institution Name">
                    <option></option>
                    <option value="0">Other</option>
                    @if (Model.EduInstitutionDropdownList != null)
                    {
                        foreach (var institute in Model.EduInstitutionDropdownList)
                        {
                            <option>@institute.CodeName</option>
                        }
                    }
                </select>
                <span id="edu-instituteName-validation" class="text-validation"></span>
            </div>
            <div class="form-group">
                <input type="text" class="form-control edu-instituteNameOther">
            </div>
            <span id="edu-instituteNameOther-validation" class="text-validation"></span>
        </div>
    </div>

    <div class="modal-footer d-flex justify-content-end m-0 p-0">
        <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button"
            class="btn btn-outline btn-primary btn-sm mb-1">
            <i class="fas fa-plus"></i> Add
        </button>
        <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1"
            style="display: none;">
            <i class="fas fa-save"></i> Update
        </button>
    </div>
</div>

This is my JavaScript code that dynamically changes the content of the modal:

<script>
    // Function to load different template content into the modal
    function loadModalContent(templateId, title) {

        // Clear previous content to prevent duplication
        $('#modalBody').empty(); 
        $('#modalBody .select2normalWithouClear').select2('destroy');

        // Load new content and set the title
        var templateContent = $('#' + templateId).html();  // Get the content of the template
        $('#modalBody').html(templateContent);             // Inject content into the modal body
        $('#modalTitle').text(title);                      // Set the modal title

        $('#modalBody .select2normalWithouClear').select2({
            placeholder: $(this).data('placeholder')
        });

        $('.edu-instituteNameOther').hide();

        $('#modal').modal('show');                         // Show the modal
    }

    // Event listener for buttons that trigger the modal with different templates
    $(document).on('click', '.openModalBtn', function () {
        var templateId = $(this).data('template');         // Get the template to load
        var modalTitle = $(this).data('title');            // Get the title for the modal

        loadModalContent(templateId, modalTitle);          // Call the function to load the content

        TMCEWoFileUpl("250", "");
    });
</script>

The problem is that when I open the modal after the page loads, it displays two dropdowns: one functions correctly, while the other seems to be a duplicate and does not work. However, when I open the modal a second time, the dropdown displays correctly and is not duplicated. Can someone help me fix this?

I’ve tried initializing it outside the modal, but it still doesn’t work.