How to fix TypeError: Cannot read properties of undefined (reading ‘backdrop’)

Why is it that every time I add new data to the database using an AJAX request, I can’t click the button to open the modal for view and update, and an error appears in the console

I should be able to view or edit the newly added data using AJAX but its not working

$.ajax({
url: “{{ route(‘admin.store_violation’) }}”,
method: ‘POST’,
data: formData,
success: function(response) {
if(response.status == ‘success’) {
$(‘#violationFormAdmin’)[0].reset();

                    $('#violationTable').load(location.href + ' #violationTable', function() {

                        $('.viewModal').on('click', function() {
                            let id = $(this).data('id');  // Get the violation ID from the data attribute
                            let targetModal = $(this).data('bs-target');  // Get the target modal ID

                            $(targetModal).find('.modal-body').html('Violation ID: ' + id);

                            // Check if modal instance exists and dispose of it
                            let modalInstance = bootstrap.Modal.getInstance(document.querySelector(targetModal));
                            if (modalInstance) {
                                modalInstance.dispose();
                            }
                            $('.modal').modal({
                            backdrop: 'static',
                            keyboard: true
                        });

                            $(targetModal).modal('show');
                            console.log("View violation with ID: " + id);
                        });

                        $('.editModal').on('click', function() {
                            let id = $(this).data('id');
                            let targetModal = $(this).data('bs-target');

                            $(targetModal).find('.modal-body').html('Edit Violation ID: ' + id);

                            // Check if modal instance exists and dispose of it
                            let modalInstance = bootstrap.Modal.getInstance(document.querySelector(targetModal));
                            if (modalInstance) {
                                modalInstance.dispose();
                            }
                            $('.modal').modal({
                            backdrop: 'static', // Reset backdrop functionality
                            keyboard: true  // Allow closing the modal using the keyboard (Esc)
                        });
                            $(targetModal).modal('show');

                            console.log("Edit violation with ID: " + id);  // This log shows the violation ID
                        });


                    });

                    Swal.fire({
                        toast: true,
                        position: 'top-right',
                        iconColor: 'white',
                        customClass: {
                            popup: 'colored-toast',
                        },
                        showConfirmButton: false,
                        timer: 2500,
                        timerProgressBar: true,
                        icon: 'success',
                        title: 'Violation added successfully',
                    });
                }
            },