CSRF_token не действителен в djnango Ajax при многократном запросе с одной и той же страницы

Я пытаюсь выполнить вход в систему на основе OTP в моем проекте. Итак, у меня есть форма с полем email и пароля в форме входа, и когда я отправляю ее через AJAX запрос, я проверяю email и пароль в базе данных, если значения верны, то я отправляю OTP по электронной почте и отображаю новое поле OTP на той же странице для ввода OTP для проверки.

До сих пор все работает нормально, но после ввода OTP, когда я пытаюсь повторно отправить форму, я получаю ошибку csrf_token is not valid. Насколько я знаю, csrf-токен генерируется только при обновлении или загрузке страницы, но в моем случае первый csrf-токен, который был сгенерирован при загрузке страницы, был использован в первом запросе сообщения.

Итак, как я могу отправить второй запрос на почту с тем же csrf_token или я могу сгенерировать новый csrf_token .

Фрагменты кода следующие;

<form id="loginForm" method="post" action="send_otp">
  <div class="col-12">
    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">Email</label>
    <input id="email" type="text" name="email" placeholder="Name">
  </div>
  <div class="col-12">
    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">Password</label>
    <input id="password" type="password" name="password" placeholder="Password">
  </div>
  <div id="otp_field" class="col-12">
                        
  </div>
  <div class="col-12">
    <button type="submit" name="submit" id="send_otp" class="button -md -green-1 text-dark-1 fw-500 w-1/1">Login</button>
  </div>
</form>

Отправка запроса и добавление поля ввода OTP при успехе через AJAX

$("#loginForm").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();
  /* get the action attribute from the <form action=""> element */
  var $form = $(this),
    url = $form.attr('action');

  /* Send the data using post with element id name and name2*/
  var posting = $.post(url, {
    "csrfmiddlewaretoken":"{{ csrf_token }}",//$('input[name="csrfmiddlewaretoken"]').val(),
    "email": $('#email').val(),
    "pass": $('#password').val()
  });

  /* Alerts the results */
  posting.done(function(data) {
    $('#email'). attr('disabled','disabled');
    $('#password'). attr('disabled','disabled');
    $('#otp_field').append('<label class="text-16 lh-1 fw-500 text-dark-1 mb-10">Enter OTP</label><input id="otp" type="text" name="otp" placeholder="Enter OTP">')
  });
  posting.fail(function() {
    
  });
});

Как я могу этого добиться, пожалуйста, помогите, заранее спасибо.

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');