JSFiddle - React, Tailwind, and code Playground

HTML

<div class="MyRating_Wrapper">
  <div class="RatingHeader">
    <span>My Rating</span>
  </div>
  <br>
  <div class="RatingImg">
     <a href="./rating/?frm_action=edit&amp;entry=143&amp;a_id=7" class="pum-trigger" style="cursor: pointer;"><img src="https://www.mediadrool.com/wp-content/uploads/2018/06/meter_SR.png"></a>
  </div>
  <br>
  <div class="RatingText_SR"><span>Strong Right</span></div>
</div>
<div class="AvgRating_Wrapper">
  <div class="RatingHeader" style="margin-left: 10px;">
    <span>Average Rating</span>
  </div>
  <br>
    <div class="RatingImg" style="margin-left: 10px;">
       <img src="https://www.mediadrool.com/wp-content/uploads/2018/06/meter_SR.png">
  </div>
  <br>

  <div class="RatingText_SR" style="margin-left: 10px;">     <span>Strong Right</span></div>
 </div>
 <div class="AvgRating_Wrapper">
  <div class="RatingHeader" style="margin-left: 10px;">
    <span>Average Confidence Score</span>
  </div>
  <br>
    <div class="ConfScore" style="margin-left: 10px;">
       7
  </div>
 </div>

CSS

/*
 Theme Name:   Magazine Hoot Premium Child (Media Drool)
 Author:       Five1Media
 Author URI:   http://www.five1media.com
 Template:     magazine-hoot-premium
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         MediaDrool
*/


/* - - - Misc Styles - - - */

.content {
   margin-top: 6px;
}

.entry-the-content {
    margin: 30PX 0px 0px 0px !important;
    display: block;
    zoom: 1;
}

.entry-content {
    border-bottom: solid 0px #ddd;
	margin-top: -15px;
	margin-bottom: 15px;
}

.frontpage-pagecontent {
    margin: 0px !important;
}

h99{
    display:none;
}

.loop-meta {
  display: none;
}

.site-logo-image #site-description {
    margin-top: 7px;
}

.topbar-inner a {
    color: inherit;
    text-decoration: none;
}

.sidebar {
    margin-top: 20px;
    line-height: 1.71em;
}

.forgot-password {
	font-size: 11px;
}

.menu-side-box {
    text-align: right;
    padding: 0px 0; 
    border-top: solid 1px #eee;
}

.sfsi_plus_widget {
    min-height: 0px !important;
    /*padding-top: 6px;*/
    /*padding-bottom: 6px;*/
	float: left;
}

.sfsi_plus_holders{
	height: 0px !important;	
}

.accent-typo {
    background: #d22254;
    color: #ffffff;
	font-size: 16px;
}

.with_frm_style .frm_scale {
	margin-right: 14px;     
	text-align: center;     
	float: left; 
}

/* - - - Article Styles - - - */

#article_left {
  float:left; 
  margin-right:10px;
  width:278px;
}

#article_left img{
    width: 278px;
    min-height: 174px;
    max-height: 174px;
    overflow: hidden;
    vertical-align: middle;
    opacity: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    float: left;
}

#article_right { 
   overflow:hidden;
   min-height:144px;
   position: relative;
}

.article_wrapper { 
  overflow:hidden;
  min-height: 174px;
}

#article_category {
  border-bottom: 1px solid #999999;
  color: #999999;
  /* padding: 4px 0 2px...

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) {
  ...