jQuery rating

HTML

Rating is <i data-rating='5'></i>

<div>
  Clickable Rating
  <ul class="rating">
    <li data-stars='10'>★</li>
  </ul>
</div>

<div>
  Readonly rating
  <ul class="rating">
    <li data-stars='10' data-readonly>★</li>
  </ul>
</div>

CSS

div {
  margin: 20px 0 0;
}

.rating {
  display: block;
  color: #a9a9a9;
  margin: 0;
  padding: 0;
  user-select: none;
}

.rating li {
  list-style-type: none;
  display: inline-block;
  padding: 1px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.rating li.filled {
  color: #21568b;
}

li[data-readonly] {
  cursor: default;
}

JavaScript

let $rating = $('[data-rating]');
let val = $rating.data('rating');
let setStars = ($el, num) => {
  $el.parent().find('[data-stars]').removeClass('filled').each(function() {
    if ($(this).index() < num) $(this).addClass('filled');
  });
  $rating.html(num);
}

// Запилим генеральские погоны
$('[data-stars]').each(function() {
  let $$ = $(this);
  for (var i = 1; i < $$.data('stars'); i++) $$.after($$[0].outerHTML);
  setStars($$, val);
});

$('[data-stars]:not([data-readonly])').click(function() {
  let i = $(this).index() + 1;
  setStars($(this), i);
  setStars($('[data-readonly]'), i);
});