jQuery that runs on Chrome & Safari, doesn't run on Firefox, Edge & Brave

Question

I am new to jQuery and have picked up writing JavaScript after a long time. I am struggling with a piece of code that works well on Chrome & Safari but doesn't work on Firefox, Edge & Brave, all running on Mac OS.

PHP Page:

<script src="js/custom.js"></script>

<script type="text/javascript">
  // Captcha Script
  var a = Math.ceil(Math.random() * 9)+ '';
  var b = Math.ceil(Math.random() * 9)+ '';
  var c = Math.ceil(Math.random() * 9)+ '';
  var d = Math.ceil(Math.random() * 9)+ '';
  var e = Math.ceil(Math.random() * 9)+ '';
  
  var code = a + b + c + d + e;
  document.getElementById("txtCaptcha").value = code;
  document.getElementById("CaptchaDiv").innerHTML = code;
  
  
  </script>

    <div class="col-lg-8 col-md-8 animated"
        data-animation="fadeInRight" data-animation-delay="300">
        <div class="hme-cntct w-100 float-left">
            <form id="contact-form">

                <div class="row">
                    <div class="col-lg-12 col-md-12" style="display: none">
                        <p id="errmsg"></p>
                    </div>
                    <!--col-6-->

                    <div class="col-lg-6 col-md-6">
                        <p>
                            <input type="text" placeholder="First Name"
                                name="first_name" required>
                        </p>
                    </div>
                    <!--col-6-->

                    <div class="col-lg-6 col-md-6">
                        <p>
                            <input type="text" placeholder="Last Name"
                                name="last_name" required>
                        </p>
                    </div>
                    <!--col-6-->
                </div>
                <!--row-->

                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <p>
                            <input type="text" placeholder="Email" name="email"
                                required class="email">
                        </p>
                    </div>
                    <!--col-6-->

                    <div class="col-lg-6 col-md-6">
                        <p>
                            <input type="text" placeholder="Phone" name="phone"
                                required class="number">
                        </p>
                    </div>
                    <!--col-6-->

                    <div class="col-lg-12">
                        <p>
                            <textarea placeholder="Message" name="message" required></textarea>
                        </p>
                    </div>
                    <!--col-6-->
                    <div class="col-lg-12">
                        <p>
                        <div class="capbox">
                            <div id="CaptchaDiv"></div>
                            <div class="capbox-inner">
                                Type the number:<br> <input type="hidden"
                                    name="txtCaptcha" id="txtCaptcha"> <input
                                    type="text" name="CaptchaInput" id="CaptchaInput"
                                    size="15" maxlength="5" required><br>
                            </div>
                        </div>
                        </p>
                    </div>
                    <!--col-6-->
                </div>
                <!--row-->


                <div class="cntct-sbmt w-100 float-left">
                    <input type="submit" value="Submit" name="submit"
                        id="submit" class="submit">
                </div>
                <!--cntct-sbmt-->
            </form>
        </div>
        <!--hme-cntct-->
    </div>
    <!--col-6-->

Custom.js:

    $(document).on("click", ".submit" , function(e){
        e.preventDefault();
        $("#contact-form").validate({
            rules: {
                CaptchaInput: { equalTo: "#txtCaptcha" }
          },
            messages: {
                CaptchaInput: "Please enter valid captcha!"
          }
        });
        if($("#contact-form").valid()) {
            $.ajax({
              type:'POST',
              url: 'https://footballfanapp.com/contactform.php',
              data:  $('form').serializeArray(),
              success:function(data){
                  data = JSON.parse(data);
                  $("#errmsg").html(data.message);
                  $("#errmsg").parent().show();
                  $("#errmsg").closest('form').find("input[type=text], textarea").val("");  
                  // $("#contact-form").reset();

                  var a = Math.ceil(Math.random() * 9)+ '';
                  var b = Math.ceil(Math.random() * 9)+ '';
                  var c = Math.ceil(Math.random() * 9)+ '';
                  var d = Math.ceil(Math.random() * 9)+ '';
                  var e = Math.ceil(Math.random() * 9)+ '';
                  var code = a + b + c + d + e;
                  document.getElementById("txtCaptcha").value = code;
                  document.getElementById("CaptchaDiv").innerHTML = code;
              }
            });
      
          }  
        });

What I am trying to do is to submit the form after validation and if the call is successful displaying a confirmation message and resetting form field and Captcha.

Can you please help me pointing out what is missing to make this run on all 4 browsers