JSFiddle - React, Tailwind, and code Playground

HTML

<br/>
<br/>
<br/>
<a class="wishlist" href="#">Add to Wishlist</a>

CSS

.adding {
     position: relative;
     left: -35px;
     top: -4px;
     display: none;
}

JavaScript

$(document).ready(function(){
  $('<span>Adding</span>')
    .addClass('adding')
    .insertAfter('.wishlist');
    
  $('.wishlist')
    .click(function(e) {
      $this = this;
      doOneUp(this, function() {
          $($this).text('Added');
      });
      e.preventDefault();
    })
});

function doOneUp(which, callback) {
  $(which)
    .next()
    .show()
    .animate({
      top: "-=50px",
      opacity: "toggle"
    }, 1000,
    function() {
      $(this)
        .css({top: ""})
          .hide('slow', function(){
            $(this).remove();
            callback();             
          });
    });
}