JSFiddle - React, Tailwind, and code Playground

HTML

<div id="status"></div>
<div id="error"></div>
<a id="mySpan" href="#">Click Me</a>

CSS

#status{
    text-align:  center;
    font-family: Arial, Verdana;
    font-size: 15px;
    background-color: #f9f9f9;
    padding: 2px;
    color: #b2cb40;
    text-transform: uppercase;
    font-weight: bold;
    display:none;
}
#error{
    text-align:  center;
    font-family: Arial, Verdana;
    font-size: 15px;
    background-color: #f9f9f9;
    padding: 2px;
    color: #e46a6a;
    text-transform: uppercase;
    font-weight: bold;    
    display:none;
}

JavaScript

$(document).ready(function(){
var status_span = $("#status");
var error_span = $("#error");
    
$("#mySpan").click(function(){
  //  alert("yes");
   slide(status_span,"Available");
});
  
});
function slide(reqDivId,message){
        var $this = reqDivId;
        if ($this.is(":hidden")) {
            $this.html(message);
            $this.slideDown(1000,function() {
                $this.delay(5000).slideUp(6000);
            });
        }
        else{
            reqDivId.html(message).delay(5000); 
        }
    }