AJAX : Uncaught ReferenceError: $ is not defined for multiple entries in multiple web forms within single HTML

Question

I am currently working on a web form with multiple submit buttons. And I am completely new to this type of development. Have already read a similar post here and here. However, this would not help me. Below is my HTML snippet:

<form id = "form_index" class="myForm" method= "post" action="/index_calc">
                <div class="col-md-2">
                    <div class="form-group"
                <span class="form-label">Entry Period</span>
                    <input class="form-control" id = "period" name="period" required>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <span class="form-label">Saifi</span>
                            <input class="form-control" id = "saifi" name="saifi"  required>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <span class="form-label">Saidi</span>
                            <input class="form-control" id = "saidi" name="saidi" placeholder="0.00" required>
                    </div>
                </div>
<div class="form-btn">
        <button class="submit-btn" id="btnSubmit_5" class="btn btn-lg btn-primary btn-block" type="button">Submit</button>
</div>
</form>
<form id = "form_rate" class="myForm" method= "post" action="/power_rate">
      <div class="col-md-2">
            <div class="form-group">
               <span class="form-label">Input MU</span>
                <input class="form-control" id = "inp_mu" name="inp_mu" placeholder="0.00" required>
                </div>
            </div>
 <div class="form-btn">
        <button class="submit-btn" id="btnSubmit_3" class="btn btn-lg btn-primary btn-block" type="button">Submit</button>
</div>

Now the associated Ajax is as follows:

<script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function(){  *<-- error indication*
$('#btnSubmit_5').click(function(){
    $ajax({
        type:'POST',
        url:'/index_calc',
        data: $('#form_index').serialize(),
        success: function(response){
                alert(response);
                },
        error: function(error){
                console.log(error);
            }
         });        
    });
    $('#btnSubmit_3').click(function(){
    $ajax({
        type:'POST',
        url:'/power_rate',
        data: $('#form_rate').serialize(),
        success: function(response){
                alert(response);
                },
        error: function(error){
                console.log(error);
            }
         });        
    });
 });

Now the above code is giving an error as follows: Uncaught ReferenceError: $ is not defined at form.html:'error indication line'

I am creating AJAX calls for each form purely for the simplicity as shown above. Then why this error is coming? Or is there any better way of handling this? P.S: In my server I am using Flask.