JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
    Rating is <span data-bind="text: raiting"></span> <br>
  Clickable Rating <br>
  <div>
      <ul class="rating" data-bind="foreach: stars">
          <li data-bind="css: {filled: is_filled}, click: $parent.setRaiting">★</li>
      </ul>
  </div>
  <br>
  Readonly rating <br>
  <div>
      <ul class="rating" data-bind="foreach: stars">
          <li data-bind="css: {filled: is_filled}">★</li>
      </ul>
  </div>
</div>

CSS

.rating{
  color: #a9a9a9;
  margin: 0;
  padding: 0;
}

ul.rating {
  display: inline-block;
}

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

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

JavaScript

function Star(index, is_filled) {
    this.is_filled = is_filled;
    this.index = ko.observable(index);
}

function ViewModel() {
    var self = this;
    self.raiting = ko.observable(5);
    self.stars = ko.computed(function () {
        var stars = [];
        for (var i=1; i<11; i++) {
            stars.push(new Star(i, i <= self.raiting()));
        }
        return stars;
    });
    self.setRaiting = function (star, event) {
        self.raiting(star.index());
    }
};

ko.applyBindings(new ViewModel());