Звёздный рэйтинг JS

const ratings = document.querySelectorAll('.rating');
if (ratings.length > 0) {
  initRatings();
}

// Основная функция
function initRatings() {
  let ratingActive, ratingValue;
  // "Бегаем" по всем рейтингам на странице
  for (let index = 0; index < ratings.length; index++) {
    const rating = ratings[index];
    initRating(rating);
  }

  //Иницицализируем конкретный рэйтинг
  function initRating(rating) {
    initRatingVars(rating);

    setRatingActiveWidth();

    if (rating.classList.contains('rating_set')) {
      setRating(rating);
    }
  }

  //Инициализация переменных 
  function initRatingVars(rating) {
    ratingActive = rating.querySelector('.rating-active');
    ratingValue = rating.querySelector('.rating-value');
  }
  //Изменяем ширину активных звезд
  function setRatingActiveWidth(index = ratingValue.innerHTML) {
    const ratingActiveWidth = index / 0.05;
    ratingActive.style.width = `${ratingActiveWidth}%`;
  }
  // Возможность указать оценку 
  function setRating(rating) {
    const ratingItems = rating.querySelectorAll('.rating-item');
    for (let index = 0; index < ratingItems.length; index++) {
      const ratingItem = ratingItems[index];
      ratingItem.addEventListener("mouseenter", function(e) {
        //Обновление переменных
        initRatingVars(rating);
        // Обновление активных звёзд
        setRatingActiveWidth(ratingItem.value);
      });
      ratingItem.addEventListener("mouseleave", function(e) {
        // Обновление активных звёзд
        setRatingActiveWidth();
      });
      ratingItem.addEventListener("click", function(e) {
        // Обновление переменных
        initRatingVars(rating);

        if (rating.dataset.ajax) {
          // Отправить на сервер
          setRatingValue(ratingItem.value, rating);
        } else {
          // Отобразить указанную оценку
          ratingValue.innerHTML = index + 1;
          setRatingActiveWidth();
        }
      });
    }
  }

  async function setRatingValue(value, rating) {
    if (!rating.classList.contains('rating-sending')) {
      rating.classList.add('rating-sending');

      //Отправка данных (value) на сервер
      let response = await fetch('rating.json', {
        method: 'GET',

        //body: JSON.stringify({
        // userRating: value
        //}), 
        // headers: {
        // 'content-type': 'application/json'
        //}


      });
      if (response.ok) {
        const result = await response.json();

        // Получаем новый рейтинг
        const newRating = result.newRating;

        // Вывод нового среднего результата
        ratingValue.innerHTML = newRating;

        // Обновление активных звезд
        setRatingActiveWidth();

        rating.classList.remove('rating-sending');
      } else {
        alert("Ошибка");

        rating.classList.remove('rating-sending');
      }
    }
  }
}

.rating {
  display: flex;
  align-items: flex-end;
  font-size: 40px;
  line-height: 0.75;
  transition: opacity 0.3s ease 0s;
}

.rating.rating-sending {
  opacity: 0.2;
}

.rating.rating-set .rating-active,
.rating.rating-set .rating-item {
  cursor: pointer;
}

.rating-body {
  color: #e2dada;
  position: relative;
}

.rating-body::before {
  content: "★★★★★";
  display: block;
}

.rating-active {
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.rating-active::before {
  content: "★★★★★";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #FFD66B;
  ;
}

.rating-items {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.rating-item {
  flex: 0 0 20%;
  height: 100%;
  opacity: 0;
}

.rating-items:hover,
.rating-items:checked {
  color: #ffe091;
}

.rating-value {
  font-size: 50%;
  line-height: 1;
  padding: 0 0 0 10px;
}

<div class="footer-rating-form">
  <div class="form-label">Рейтинг сервиса</div>
  <div data-ajax="true" class="rating rating-set">
    <div class="rating-body">
      <div class="rating-active"></div>
      <div class="rating-items">
        <input type="radio" class="rating-item" value="1" name="rating">
        <input type="radio" class="rating-item" value="2" name="rating">
        <input type="radio" class="rating-item" value="3" name="rating">
        <input type="radio" class="rating-item" value="4" name="rating">
        <input type="radio" class="rating-item" value="5" name="rating">
      </div>
    </div>
    <div class="rating-value">3.7</div>
  </div>
</div>