AJAX: Uncaught ReferenceError: $ не определено для нескольких записей в нескольких веб-формах в одном HTML

Question

В настоящее время я работаю над веб-формой с несколькими кнопками отправки.И я совершенно новичок в этом типе развития.Уже читал аналогичный пост здесь и здесь .Однако это не поможет мне.Ниже приведен мой HTML-фрагмент:

<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>

Теперь связанный Ajax выглядит следующим образом:

<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);
            }
         });        
    });
 });

Теперь приведенный выше код выдает ошибку следующим образом: Uncaught ReferenceError: $ is not defined at form.html:'error indication line'

Я создаю AJAX-вызовы для каждой формы исключительно для простоты, как показано выше.Тогда почему эта ошибка идет?Или есть лучший способ справиться с этим?PS: на моем сервере я использую Flask.