JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="default" id="favorite" data-href="/echo/json/">TESTE</button>

CSS

a {
  width: 50px;
  padding: 10px;
}

.default {
  background-color: red;
}

.concluido {
  background-color: green;
}

.esperando {
  background-color: yellow;
}

JavaScript

$btn_favorite = $("#favorite");
var dados = {
  id: "3213",
  user: "user1",
  data: new Date()
};

function beforeRequisicao() {
  $btn_favorite.removeClass("default");
  $btn_favorite.addClass("esperando");
}

function doneRequisicao() {
  $btn_favorite.removeClass("esperando");
  //Se retorno for ok, setar a classe do botao para 'concluido'
  $btn_favorite.addClass("concluido");
}

function failRequisicao() {
  //Se algo deu errado, setar botao para 'default' novamente
  $btn_favorite.removeClass("esperando concluido");
  $btn_favorite.addClass("default");
}

$btn_favorite.on("click", function() {
  $.ajax({
    method: 'POST',
    url: $btn_favorite.attr('data-href'),
    data: dados, //aqui algum dado para ser enviado para o servidor
    beforeSend: function() {
      beforeRequisicao();
    },
    success: function(data) {
      doneRequisicao();
    },
    error: function(data) {
      failRequisicao();
    }
  });
});