BlockUI Jquery PLugin not working on my AJAX form

Question

I am working on a form whereby I am submitting to the backend (build with Laravel) using AJAX. I want when the user clicks the submit button, blockUI jquery plugin is called and a spinner is shown. After the response from the server, the spinner from blockUI should stop and redirect the user to another page. The problem is block UI is not being fetched on the web page. I have added jquery and blockUI script tag at the bottom of the page but still not working..

Scripts added at the bottom of the page

<!--Jquery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Block U.I plugin-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>

Form being submitted

<form method="POST" action="#" id="form" data-parsley-validate>
    <!-- CSRF TOKEN-->
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <!-- END CSRF TOKEN-->
    <div class="form-line registar2 love">
        <input id="passport" type="text-area" class="form-input" name="passport" value="{{ old('passport') }}" autofocus required data-parsley-passport= ''>
            <label> Passport</label>
            <div class="error-label"></div>
            <div class="check-label"></div>
             @if ($errors->has('passport'))
                <span class="help-block">
                    <strong>{{ $errors->first('passport') }}</strong>
                </span>
            @endif
   </div>

    <div class="form-line registar2 move" >
      <input id="kra" type="text-area" class="form-input" name="kra" value="{{ old('kra') }}" maxlength="12" required data-parsley-kra = ''>
      <label>KRA Pin *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('kra'))
        <span class="help-block">
            <strong>{{ $errors->first('kra') }}</strong>
        </span>
      @endif
    </div>

    <div class="form-line registar2 love {{ $errors->has('residence') ? ' has-error' : '' }}">
      <input id="residence" type="text-area" name="residence" class="form-input" required>
      <label>Current Residential Address *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('residence'))
        <span class="help-block">
            <strong>{{ $errors->first('residence') }}</strong>
        </span>
      @endif
    </div>
 <button type="submit" class="form-b3c love" id="pay"> Proceed to Payament</button>

</form>

AJAX code

<script>
    // Get the form via its id
    var form = $('#form');

    $( "form" ).submit(function( event ) {
      //let keyword is used as a local scope
      let form = $( this )
      let formData = new FormData(form[0]);
      event.preventDefault();
      console.log(formData);

      //Check for Parsley validation method
      form.parsley().validate();

      //Returns true if Parsley validation has no errors
      if (form.parsley().isValid()){
        //Call blockU.I plugin
        $.blockUI({ message: ' loading...' });
        $.ajax({
            type: "POST",
            data:formData,
            processData: false,
            contentType: false,
            url: "saveAdd",
            success: function(response){
                //Unblock BlockUI
                $.unblockUI();
                //Page to redirect to
                window.location.href="payment" ;
            },
            failure: function(errMsg) {
                alert(errMsg);
            }
        });
      }
    });
</script>