bootstrap v5.3 modal not closing dynamically but closes dynamically with other submissions

I have a bootstrap modal which has an id=”dynModal”. I dynamically add the content to dynModal using jquery and after the action or ajax request is completed successfully the modal gets emptied and then executes code to then close it. The issue is that it works with certain buttons that executes the modal and then does not work at all for other buttons.

$(function () {
    var dynModal = new bootstrap.Modal(document.getElementById('dynModal'), { backdrop: 'static' });

$("body").on("click", ".editProxyHost", function(e) {
    $("#dynModal .modal-dialog").addClass("modal-lg");
    $("#modalTitle").empty().append("Edit Proxy Host");
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
        },
        type: 'POST',
        url: '/url/fetch',
        dataType: "json",
        data: {
            hostID: $(this).attr("data-host-id")
        },
        success: function(response) {
            $("#dynModal .modal-dialog").addClass("modal-lg");            
            $("#dynModal .modal-body").empty().append(`
                <form action="javascript:void(0);" id="proxyHostForm" method="POST">
                    // formdata
                </form>
            `);
            $("#dynModal .modal-footer").empty().append(`
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" id="saveModal" data-mode="updateProxyHost" class="btn btn-success">Save</button>
            `);
            dynModal.show();
        },
        error: function(response) {
            // Handle error response
            console.error('Error:', response);
            alert('An error occurred while submitting the form. Please try again.');
        }
    });
});

$("body").on("click", "#saveModal", function(e) {
    switch ($(this).attr("data-mode")) {
        case 'editProxyHost':
            var form = $("#proxyHostForm");
            var formData = form.serializeArray();
            if (form[0].reportValidity()) {
                var serializedData = $.param(formData);

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
                    },
                    type: 'POST',
                    url: '/url',
                    dataType: "json",
                    data: serializedData,
                    success: function(response) {
                        console.log(response);
                        const modalInstance = bootstrap.Modal.getInstance("#dynModal");
                        modalInstance.hide();
                        $("#modalTitle").empty();
                        $("#dynModal .modal-body").empty();
                        $("#dynModal .modal-footer").empty();
                    },
                    error: function(response) {
                        console.error('Error:', response);
                        alert('An error occurred while submitting the form. Please try again.');
                    }
                });
            } else {
                let firstInvalidElement = form.find(':invalid').first();
                let firstInvalidTabPane = firstInvalidElement.closest(".tab-pane");
                let firstInvalidTabId = firstInvalidTabPane.attr("id");
                let firstInvalidTabTrigger = document.querySelector(`button[data-bs-target="#${firstInvalidTabId}"]`);
                if (firstInvalidTabTrigger) {
                    let tabInstance = new bootstrap.Tab(firstInvalidTabTrigger);
                    tabInstance.show();
                }
                form[0].reportValidity();
            }
            break;
    }
});
});

This is one of the modals that does not close after it saves but it empties the modal.

I use this method for quite a few modals and they all close except for this one:

The following just refuses to execute:

const modalInstance = bootstrap.Modal.getInstance("#dynModal");
modalInstance.hide();

The modal should simply close then empty but this one just does not. I have other buttons that trigger the same modal and after #saveModal is clicked and the ajax forms response is successful they close the modal dynamically except for this one.