JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<br/>
<span class="statusChanger1 active">Active</span><br><br>
<span class="statusChanger2 active2">Active</span>

CSS

.statusChanger1 {
    cursor: pointer;
}
.statusChanger2 {
    cursor: pointer;
}
.active {
    font-family: "Segoe UI", Verdana;
    font-size: .85em;
    padding-top:5px;
    padding-bottom:5px;
    padding-right:35px;
    padding-left:35px;
    background-color:green;
    border: 3px groove black;
}
.active2 {
    font-family: "Segoe UI", Verdana;
    font-size: .85em;
    padding-top:5px;
    padding-bottom:5px;
    padding-right:35px;
    padding-left:35px;
    box-sizing: border-box;
    background-color:green;
    border: 3px groove black;
}
.inactive {
    font-family: "Segoe UI", Verdana;
    font-size: .85em;
    padding-top:5px;
    padding-bottom:5px;
    padding-right:30px;
    padding-left:30px;
    background-color:red;
    border: 3px groove black;
}
.inactive2 {
    font-family: "Segoe UI", Verdana;
    font-size: .85em;
    padding-top:5px;
    padding-bottom:5px;
    padding-right:35px;
    padding-left:35px;
    box-sizing: border-box;
    background-color:red;
    border: 3px groove black;
}
.deactivate {
    font-family: "Segoe UI", Verdana;
    font-size: .85em;
    padding-top:5px;
    padding-bottom:5px;
    padding-right:22px;
    padding-left:22px;
    background-color:cyan;
    border: 3px groove black;
}
.deactivate2 {
    font-family: "Segoe UI", Verdana;
    font-size: .85em;
    padding-top:5px;
    padding-bottom:5px;
    padding-right:35px;
    padding-left:35px;
    box-sizing: border-box;
    background-color:cyan;
    border: 3px groove black;
}
.activate {
    font-family: "Segoe UI", Verdana;
    font-size: .85em;
    padding-top:5px;
    padding-bottom:5px;
    padding-right:29px;
    padding-left:29px;
    background-color:cyan;
    border: 3px groove black;
}
.activate2 {
    font-family: "Segoe UI", Verdana;
    font-size: .85em;
    padding-top:5px;
    padding-bottom:5px;
    padding-right:35px;
    padding-left:35px;
    box-sizing: border-box;
    background-color:cyan;
    border: 3px groove black;
}

JavaScript

$(".statusChanger1").mouseover(function(e) {
            var status = $(".statusChanger1").text(); 
            if (status == "Active") {                      
              $(this).addClass("deactivate").removeClass("active");
              $(".statusChanger1").text("Deactivate");
            }
            else if (status == "Inactive") {          $(this).addClass("activate").removeClass("inactive");
                $(".statusChanger1").text("Activate");
            }
        });
        $(".statusChanger1").mouseout(function(e) {
            var status = $(".statusChanger1").text(); 
            if (status == "Activate") {
                $(this).addClass("inactive").removeClass("activate");
                $(".statusChanger1").text("Inactive");
            }
            else if (status == "Deactivate") {                $(this).addClass("active").removeClass("deactivate");
                $(".statusChanger1").text("Active");
            }
        });
        $(".statusChanger1").click(function(e) {
            var status = $(".statusChanger1").text(); 
            if (status == "Deactivate") {
               $(this).text('Inactive'); $(this).addClass("inactive").removeClass("deactivate");
                
            } else {
                $(this).addClass("active").removeClass("activate").removeClass("inactive");
                $(this).text('Active');
            }            
        });
        

$(".statusChanger2").mouseover(function(e) {
            var status = $(".statusChanger2").text(); 
            if (status == "Active") {                      
              $(this).addClass("deactivate2").removeClass("active2");
              $(".statusChanger2").text("Deactivate");
            }
            else if (status == "Inactive") {                                  
$(this).addClass("activate2").removeClass("inactive2");
                $(".statusChanger2").text("Activate");
            }
        });
        $(".statusChanger2").mouseout(function(e) {
  ...