Ponizszy kod dodaje na chwile animacje ladowania do przycisku i pozniej przywroca go do normalnego stanu tylko jest za duzo powtarzania kodu. Czy mozna to ugryzc inaczej, aby nie pisac tyle?

Chodzi o to,ze przy wiekszej ilosci przyciskow bedzie mozna sobie palce polamac przy pisaniu :O

Moze uzyc jakos funkcji .find() aby znalezc w przycisku selektor <i>, usunac z niego klase .fa-plus i zastapic ja klasa ikony .fa-spinner?

[HTML] pobierz, plaintext 
      <button id="btnAdd" class="btn btn-success" onclick="add_book()"><i class="fa fa-plus"></i> Add Book</button>
<script>
$("#btnAdd").click(function () {
    $(this).html('<i class="fa fa-spinner fa-spin"></i> Wczytywanie...');//adding animation
    $(this).attr('disabled', true);//disabling 
    setTimeout(() => { 
        $(this).attr('disabled', false);//enabling
        $(this).html('<i class="fa fa-plus"></i> Add Book');//defaulting
    }, 1000);
});
</script>
[HTML] pobierz, plaintext 

Zamiast ID moglbym uzyc klasy .btn dla wszystkich przyciskow

[HTML] pobierz, plaintext 
$(".btn").click(function () {
[HTML] pobierz, plaintext 

ale tutaj pojawia sie problem, bo przycisk Edit mialby zmieniony opis na Add Book
Tutaj odnosnik do codepen aby szybko sprawdzic dzialanie

dlaczego zamiast #btnAdd w skrypcie JS nie użyjesz klasy .btnAdd lub coś bardziej zrozumiałego .btbAddBook?

Jesli uzyje klasy zamiast id, skrypt zamieni opis nastepnego przycisku z np. Edit na Add

To albo opakuj Add/Edit w oddzielny blok (span) i go nie podmieniaj, albo zapisuj pierwotny komunikat w button data-message="Add" i z niego skorzystaj przy powrocie do stanu pierwotnego.

Dobra. Znalazłem rozwiązania bez niepotrzebnego pakowania dodatkowych tagów typu <span> w plikach.

[HTML] pobierz, plaintext 
 <script>
    $(".btn").click(function() {
       var initialValue =$(this).html(); //stores initial value in a variable
      $(this).html('<i class="fa fa-spinner fa-spin"></i> loading...'); //adding animation
      $(this).attr('disabled', true); //disabling 
      setTimeout(() => {
     $(this).html(initialValue); //restores initial value from a variable
        $(this).attr('disabled', false); //enabling
      }, 500);
    });
  </script>
[HTML] pobierz, plaintext 

Podsumowujac, zawartosc przycisku zapisuje do zmiennej i pozniej przywracam wartosc. Wszystko za pomoca 2 linii kodu i dziala na 50 przyciskach na stronie, zmieniajac animacje tylko kliknietego. Mam nadzieje, ze komus sie przyda.
Stracilem sporo czasu na szukanie rozwiazania. Najwiekszym problemem jest nauka syntaxu :/

Zobacz tak:
https://jsfiddle.net/rnLhcsf3/