After assigning a variable, the script stops working

I am making an HTML form, which worked fine. Then I wanted to change the submit button's text according to the response I get after submitting the form ("Form was submitted"/"An error has occurred" etc.).

To do this I needed to store the text within the button (at least, I think I need to), so I could change the button text after few seconds back to "Submit". However, when I added the buttonText variable, the script stopped working. When I erase (or comment out) the line, the script starts working fine again.

Does anyone have any idea where any bug might be?

<div class="text-center mt-4">
  <button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">
    <span class="submit-button-text">Submit</span>
  </button>
  <img src="/assets/newsletter/img/loading.gif" class="loading-img">
</div>

$(document).ready(function() {
  $("#contact-form").on("submit", function(e) {
    e.preventDefault();

    if (validateEmail($("#contact-form [name='email']"))) {
      $("#contact-form [name='email']").css("border", "2px solid red");
    } else {
      $("#loading-img").css("display", "block");
      var buttonText = $(".submit-button-text").text(); // adding this causes the issue
      var sendData = $(this).serialize();

      $.ajax({
        type: "POST",
        url: "/assets/newsletter/get_response.php",
        data: sendData,
        success: function(data) {
          $("#loading-img").css("display", "none");
          $(".submit-button-text").text(data).delay(3000).text(buttonText);
        }
      });
    }
  });
});