JSFiddle - React, Tailwind, and code Playground

by suhail

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<div id="stars">

<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="far fa-star"></span>


</div>

CSS

.fa-star{
  color:orange;
  cursor:pointer;
}

JavaScript

$('#stars span').on('click',function(){
	$(this).removeClass('far').addClass('fas');
	$(this).prevAll().removeClass('far').addClass('fas');
  $(this).nextAll().removeClass('fas').addClass('far');
});