JSFiddle - React, Tailwind, and code Playground

HTML

<div id="edit_user_rating">
  <div class="rating_star">
    <span>&#9734;</span><span>&#9734;</span><span>&#9734;</span><span class="star_select">&#9733;</span><span class="star_select">&#9733;</span>
  </div>
</div>

CSS

#edit_user_rating {
  text-align: center;
  width: 200px;
  background: #000;
  height: 50px;
}

.rating_star {
  unicode-bidi: bidi-override;
  direction: rtl;
  transition: 0.2s;
  color: #737373;
}

.rating_star > span {
  display: inline-block;
  position: relative;
  font-size: 25px;
  height: 0.1px;
  transition: 0.2s;
}

.rating_star > span:hover:before,
.rating_star > span:hover ~ span:before {
  content: "\2605";
  position: absolute;
  color: #FEDF69;
  transition: 0.2s;
}

.star_select {
  color: #FEDF69!important;
}

JavaScript

$("body").on("mouseenter", "#edit_user_rating", function() {
  $("#edit_user_rating").html('<div class="rating_star"><span class="click" data-id="5">&#9734;</span><span class="click" data-id="4">&#9734;</span><span class="click" data-id="3">&#9734;</span><span class="click" data-id="2">&#9734;</span><span class="click" data-id="1">&#9734;</span></div>');
});

$("body").on("mouseleave", "#edit_user_rating", function() {
  $("#edit_user_rating").html('<div class="rating_star"><span>&#9734;</span><span>&#9734;</span><span>&#9734;</span><span cla
  ss="star_select">&#9733;</span><span class="star_select">&#9733;</span></div>');
});
$("#edit_user_rating").trigger("mouseleave");
$("body").on("click", ".click", function(event) {
  event.stopPropagation();
  var id = $(this).data('id');
  alert(id);
});