Inconsistent execution of Error function for Jquery Ajax POST request

I am running into an issue in my error handling of a Jquery Ajax request, and I'm having trouble finding the root of it.

I have a staging site where I am testing error responses for a form submission. The first time I fill out the form fully and click submit, the form is replaced with a brief "processing" message, and then input fields re-appear with the expected error message for Invalid Token.

However, when I click subsequent times sometimes it gets stuck on showing the "processing" message, even though I can see an Error response. It is strange because the console.error() that I have in my Error: function gets triggered, but the Jquery calls that should handle the Form's state don't seem to get complete even though they are in the same scope.

Here is are the jquery variables handling the form's state:

  const $formErrorState = $('#SIM-Order-Error-State');
  const $formErrorStateText = $('#SIM-Order-Error-State-Text');
  const $formCompleteState = $('#SIM-order-complete-state');
 const $formSuccessState = $('#SIM-order-success-state');
  const $formInitialState = $('#SIM-order-form');

and the call itself:

function simOrderRequest(token, fData){
console.log(fData);
console.log(JSON.stringify(fData));
$.ajax({
    method: 'POST',
    url: 'https://control.dev.yomobile.xyz/api/v1.0/sim-request/confirm/?token='+token,
    data: JSON.stringify(fData),
    contentType: "application/json; charset=utf-8",
        dataType: "json",
    success: function (data) {
      if (data.type=="bad_request" || data.status==400) {
        $formErrorState.show();
        $formSuccessState.hide();
        $formErrorStateText.text(data.responseJSON.type+": "+data.responseJSON.description);
        $formInitialState.show();
      }
      if (data.status==500){
        $formErrorState.show();
        $formSuccessState.hide();
        $formErrorStateText.text(data.responseJSON.type+": "+data.responseJSON.description);
        $formInitialState.show();
      }else {
        $formCompleteState.show();
        $formSuccessState.hide();
      }
    },
    error: function (error) {
    $formSuccessState.hide();
    $formErrorState.show();
    $formInitialState.show();
    $formErrorStateText.text(error.responseJSON.type+": "+error.responseJSON.description);
            console.error(error);
    },
  });
}
});

This is the expected behavior

But sometimes it gets stuck here, once the error is returned, and does not return to the input fields