Bootstrap 5.x validation mixed with ajax, works on local dev pc but not on server

Question

I built a simple form that needs validation and then trigger an ajax call (open to not using ajax).

When I run the code on my dev computer (xampp) everything works fine.When I run it on a shared hosting server the validation occurs but the form still submits even if the validation fails.

I've determine that the ajax always runs before the anonymous function but that shouldn't matter since the code runs smoothly on one computer. I tried to put the anonymous function before the ajax and no change.

This is my first post on stack, I'm far from a js expert, please let me know if this is an obvious error or if need to include more than this.

Thanks!

Here's the html code

    <div id="addEmployeeModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="add_form" class="needs-validation" autocomplete="off" novalidate>
                    <div class="modal-header">
                        <h4 class="modal-title">Add User</h4>
                        <button type="button" class="btn-close close" data-bs-dismiss="modal" aria-hidden="true">&nbsp;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="form-group">Type :
                                <div class="">
                                    <div class="form-check">
                                        <input type="radio" id="toprope" name="accred_type" class="form-check-input" value="1" required>
                                        <label for="toprope" class="form-label">Top Rope</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="radio" id="lead" name="accred_type" class="form-check-input" value="2">
                                        <label for="lead" class="form-label">Lead</label>
                                    </div>
                                    <div class="invalid-feedback">Field cannot be blank!</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="firstname" class="form-label">First Name</label>
                                <input id="firstname" name="firstname" type="text" class="form-control" required>
                                <div class="invalid-feedback">Field cannot be blank!</div>
                            </div>
                            <div class="form-group">
                                <label>Last Name</label>
                                <input type="text" id="lastname" name="lastname" class="form-control" required>
                                <div class="invalid-feedback">Field cannot be blank!</div>
                            </div>
                            <div class="form-group">
                                <label>Birthday Date (yyyy-mm-dd)</label>
                                <div class="input-group col-md-5">
                                    <input type="" id="dob" name="dob" class="form-control" style=" z-index: 100000;" required>
                                    <div class="invalid-feedback">Field cannot be blank!</div>
                                </div>
                            </div>
                            <br />
                            <div class="modal-footer">
                                <input type="hidden" value="1" name="type">
                                <input type="button" class="btn btn-default" data-bs-dismiss="modal" value="Cancel">
                                <button type="submit" class="btn btn-success" id="btn-add">Add</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

Here's the js script for the validation

(function () {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')

    // Loop over them and prevent submission
    //Array.prototype.slice.call(forms)
    Array.from(forms)
        .forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
            
            }
            alert("Matt")
            form.classList.add('was-validated')
           
        }, false)
        })
})()

And here's the ajax code

    // Add user
    $(document).on('click','#btn-add',function(e) {
        
        var data = $("#add_form").serialize();
        // console.log(data);
        alert("submit triggered");
        console.log("bleh");
         
        $.ajax({
            data: data,
            type: "post",
            url: "include/save.php",
            success: function(dataResult){
                    //console.log(dataResult);
                    var dataResult = JSON.parse(dataResult);
                    alert(statusCode)
                    if(dataResult.statusCode==200){
                        $('#addEmployeeModal').modal('hide');
                        location.reload();                      
                    }
                    else if(dataResult.statusCode==201){
                       alert(dataResult);
                    }
            },

        });

    });

Edit: The form is printed in the index.php file by calling a php function from an included page, if that makes any difference.

Edit: I'm testing in xampp but deployed in cpanel if that can help find the issue.