Класс для работы со звездами на сайте.

index.html

<!-- HTML для класса -->
<span class="rating nowrap" id="stars3">
    <i class="empty star" data-qty-star="1"></i>
    <i class="empty star" data-qty-star="2"></i>
    <i class="empty star" data-qty-star="3"></i>
    <i class="empty star" data-qty-star="4"></i>
    <i class="empty star" data-qty-star="5"></i>
    <label for="stars_input3"></label>
    <input type="text" name="star_rait_speed" id="stars_input3" value="0" class="review-qty" readonly>
</span>

star.js

  /*** Выбор звезды ***/
  class WorkStar {
    constructor (stars_input, select_star) {
      this.stars_input = stars_input // инпут куда будем выводить количество звезд
      this.select_star = select_star // html список тегов i со звездами
      this.num = 0 // Количество звезд
      this.addEventClick()
      this.addEventMouseOver()
    }

    addEventClick () {
      for (let i = 0; i < this.select_star.length; i++) {
        this.select_star[i].addEventListener('click', (e) => this.select_stars.call(this, e.target))
      }
    }

    addEventMouseOver () {
      for (let i = 0; i < this.select_star.length; i++) {
        this.select_star[i].addEventListener('mouseover', (e) => this.select_star_hover.call(this, e.target))
      }
    }

    select_stars (e) {
      this.num = e.dataset.qtyStar
      this.celebrate_stars.call(this)
    }

    select_star_hover (e) {
      this.num = e.dataset.qtyStar
      this.celebrate_stars.call(this)
    }

    celebrate_stars () {
      for (let i = 0; i < this.select_star.length; i++) {
        if (i < this.num) {
          this.select_star[i].setAttribute('class', 'fill star')
        } else {
          this.select_star[i].setAttribute('class', 'empty star')
        }
      }
      this.stars_input.value = +this.num

      switch (this.num) {
        case '1':
          this.stars_input.value = '1'
          break
        case '2':
          this.stars_input.value = '2'
          break
        case '3':
          this.stars_input.value = '3'
          break
        case '4':
          this.stars_input.value = '4'
          break
        case '5':
          this.stars_input.value = '5'
          break
        default:
          this.stars_input.value = '0'
      }
    }
  }

  let stars_input1 = document.getElementById('stars_input1')
  let select_star1 = document.querySelectorAll('#stars1 i')
  let generalSelectStars1 = new WorkStar(stars_input1, select_star1)

style.scss

.rating {
  position: relative;

  i {
    display: inline-block;
    width: 21px;
    height: 21.5px;
  }
  i.fill {
    background: url(../img/star_fill.svg) no-repeat 0 0;
  }
  i.empty {
    background: url(../img/star_gray.svg) no-repeat 0 0;
    width: 21px;
    height: 21.5px;
  }
}