JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="beeRating">
	<li class="oneBee" id="1" >1</li>
	<li class="twoBee" id="2">2</li>
	<li class="threeBee" id="3">3</li>
	<li class="fourBee" id="4">4</li>
	<li class="fiveBee" id="5">5</li>
</ul>

CSS

ul {
	margin: 150px 100px;
	list-style: none;
}
ul li {
	display: inline-block;
	opacity: .25;
	font-size: 50px;
	cursor: pointer;
}

JavaScript

var index=1;
$(".beeRating li").on({
	mouseover: function() {
        if(index==1)
        {
		$(this).addClass('stop');
		$("li").each(function(index,domEle) {
			$(domEle).css('opacity', '1');
			if( $(this).hasClass('stop') ) {
				return false;
			}
		})
        }
	},
	mouseleave: function() {
         if(index==1)
        {
		$(this).removeClass('stop');
		$("li").each(function(index,domEle) {
			$(domEle).css('opacity', '.25');
		})
        }
	},
	click: function() {
		var rating = $(this).attr('id');
		console.log(rating);
		index=0;
        $.ajax({    // do ajax request
           url: "/echo/json/"
          
           }).done(function() {
              alert("success");
              index=1;  // on done set the index as 1
            });
       }
});