JSFiddle - React, Tailwind, and code Playground

by M Shameer

HTML

<ul id="ratecv">
    <li id="star1" class="star"></li>
    <li id="star2" class="star current"></li>
    <li id="star3" class="star"></li>
    <li id="star4" class="star"></li>
    <li id="star5" class="star"></li>
 </ul>

CSS

.star {
   height: 2em;
   width: 2em;
   border: .1em solid black;
   border-radius: 1.1em;
   display: inline-block;
   margin: 0;
   padding: .1em;
  }

  .starred {
   background-color: yellow;
  }

  .starred-chosen {
   background-color: green;
  }

JavaScript

$(document).ready(function(){
	
      $(".star").hover(function(){
		 $(this).addClass('starred');
		 $(this).prevAll('.star').addClass('starred');
	  	}, function(){
			$(this).removeClass('starred');
			$(this).prevAll('.star').removeClass('starred');
		});
		
		$('.star').click(function(e) {
            $(this).addClass('starred-chosen');
			$(this).prevAll('.star').addClass("starred-chosen");
        });
    });