JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
  <i class="far fa-star" data-rating="1">1</i>
  <i class="far fa-star" data-rating="2">2</i>
  <i class="far fa-star" data-rating="3">3</i>
  <i class="far fa-star" data-rating="4">4</i>
  <i class="far fa-star" data-rating="5">5</i>
</h2>

JavaScript

$('[class="far fa-star"]').mouseenter(function() {
  var target = parseInt($(this).data('rating'));

  for (i = 0; i < target; i++) {
    $(this).parent().children(i).css('background-color', 'yellow');
  }
});

$('[class="far fa-star"]').mouseleave(function() {
  var target = parseInt($(this).data('rating'));

  for (i = 4; i > target; i--) {
    $(this).parent().children(i).css('background-color', 'transparent');
  }
});