JSFiddle - React, Tailwind, and code Playground

by ShoeLace1291

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="rating" style="float: none;clear: both;">
  <noscript>
    <label class="radio-inline">
      <input type="radio" name="stars" value="1" title="1 Star"> 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="stars" value="2" title="2 Stars"> 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="stars" value="3" title="3 Stars"> 3
    </label>
    <label class="radio-inline">
      <input type="radio" name="stars" value="4" title="4 Stars"> 4
    </label>
    <label class="radio-inline">
      <input type="radio" name="stars" value="5" title="5 Stars"> 5
    </label>
  </noscript>
</div>
<input type="text" name="stars" value="" id="stars">

CSS

.rating {
  color: gold;
  font-size: 32px;
}

JavaScript

$element = $('.rating');
$element.empty();
for (var i = 0; i < 5; i++) {
  var occurrence = i + 1;
  var newStar = $('<i class="fa fa-star-o" title="' + occurrence + ' stars" data-occurrence="' + occurrence + '"></i>');
  newStar.on('click', function() {
    $('#stars').val(occurrence + ' stars given.');
    console.log(occurrence + ' stars given.');
  });
  $element.append(newStar);
}
$element.each(function() {
  var _parent = $(this);
  var originalStars = _parent.html();
  $(_parent).on('mouseover', 'i[class*="fa-star"]', function() {
    var starOccurrence = $(this).prevAll().andSelf().length;
    $(this).prevAll().andSelf().removeClass('fa-star-o').addClass('fa-star');
  }).mouseout(function() {
    $(_parent).html(originalStars);
  });
});