It's possible to use Toggle Button to change between more than 2 classes

I'm studding Java with Spring boot and Thymeleaf, so i'm creating some views and I've encountered some challenge. I wanted to create a toggle button to "Pendente" and "Recebido", but now, i'm trying to put the option "Cancelado", but I encountered some advertisements.

<div class="row mb-3">
            <label for="statusCodes" class="col-sm-2 col-form-label"
              >Status</label
            >
            <div class="col-sm-2">
              <button
                type="button"
                id="toggleButton"
                class="btn btn-toggle btn-pendente"
                data-value="PENDENTE"
              >
                Pendente
              </button>
              <input
                type="hidden"
                name="statusCodes"
                id="statusCodes"
                value="PENDENTE"
              />
            </div>
          </div>

this is my div, that was working perfectly before.

 $(function () {
    $("#toggleButton").on("click", function () {
      $(this).toggleClass("btn-pendente btn-recebido btn-cancelado");
      if ($(this).hasClass("btn-pendente")) {
        $(this).text("Pendente");
        $("#statusCodes").val("PENDENTE");
      } else if ($(this).hasClass("btn-recebido")) {
        $(this).text("Recebido");
        $("#statusCodes").val("RECEBIDO");
      } else if ($(this).hasClass("btn-cancelado")) {
        $(this).text("Cancelado");
        $("#statusCodes").val("CANCELADO");
      }
    });
  });

I've imagine that will be easy add one more class button, but when I did it, when clicked in "Pendente" button, changes to "Recebido" but with "Cancelado" style

.btn-pendente {
  width: 140px;
  color: orange !important;
  background-color: transparent;
  border: 2px solid orange !important;
}

.btn-recebido {
  width: 140px;
  color: #28a745;
  background-color: transparent;
  border: 2px solid #28a745;
}

.btn-cancelado {
  width: 140px;
  color: red;
  background-color: transparent;
  border: 2px solid red;
}

This is my first question here, sorry for something

You can try this, it should work

$(function () {
      $("#toggleButton").on("click", function () {
        if ($(this).hasClass("btn-pendente")) {
          $(this).removeClass("btn-pendente")
          $(this).addClass("btn-recebido")
          $(this).text("Recebido");
          $("#statusCodes").val("RECEBIDO");
        } else if ($(this).hasClass("btn-recebido")) {
          $(this).removeClass("btn-recebido")
          $(this).addClass("btn-cancelado")
          $(this).text("Cancelado");
          $("#statusCodes").val("CANCELADO");
        } else if ($(this).hasClass("btn-cancelado")) {
          $(this).removeClass("btn-cancelado")
          $(this).addClass("btn-pendente")
          $(this).text("Pendente");
          $("#statusCodes").val("PENDENTE");
        }
      });
    });