JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<div class="whatsUp">
<div class="blue">asasasaa</div>
</div>
<button id="meBtn">Click Me</button>
<button id="meBtn2">Change Me</button>

CSS

.blue{
    background: blue;
    color: #fff;
    width: 100%;
    min-height: 30px;
    display: none;
}

.red{
    background: red;
    color: white;
}

button{
    display : inline-block;
}

JavaScript

function showDiv(){
$('.blue').show();

};

function changeDiv(){
$('.whatsUp').find('.blue').removeClass('blue').addClass('red');
}

$(document).ready(function(){
var claaBacks = $.Callbacks();
    $('#meBtn').click(function(){
    claaBacks.fire(showDiv());
     claaBacks.remove(changeDiv());    
    
    });
  
    
    $('#meBtn2').click(function(){
    claaBacks.remove(showDiv());
    claaBacks.fire(changeDiv());
    });

});