JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="rating">
  <span class="star1">★</span>
  <span class="star2">★</span>
  <span class="star3">★</span>
  <span class="star4">★</span>
  <span class="star5">★</span>
</div>

CSS

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}

.rating>span {
  display: inline-block;
  position: relative;
  width: 14px;
  color: #c4b8b8;
  font-size: 25px;
}

.rating>span:hover,
.rating>span:hover~span {
  color: transparent;
}

.rating>span:hover:before,
.rating>span:hover~span:before {
  content: "\2605";
  position: absolute;
  color: gold;
}

JavaScript

$(document).ready(function() {
  $('.rating span').click(function() {
  debugger;
    $('.rating span').removeClass('checked');
    $(this).parent().addClass('checked');
  });
});