<div class="star">
  <div class="star__item"><i class="fa fa-star" aria-hidden="true"></i></div>
  <div class="star__item"><i class="fa fa-star" aria-hidden="true"></i></div>
  <div class="star__item"><i class="fa fa-star" aria-hidden="true"></i></div>
  <div class="star__item"><i class="fa fa-star" aria-hidden="true"></i></div>
  <div class="star__item"><i class="fa fa-star" aria-hidden="true"></i></div>
</div>

body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

.star {
  display: flex;
}

.star__item {
  color: rgb(255, 202, 117);
  margin: 2px;
  cursor: pointer;
  font-size: 70px;
}

.star__item_select {
  color: rgb(255, 195, 48);
}

.star__item_active {
  color: rgb(255, 195, 48);
}

.star__item_active.star__item_select {
  color: rgb(255, 134, 0);
}

var stars = document.querySelectorAll(".star__item"), 
    starsActive,
    starsSelect;
 
stars.forEach((element, index) => {
  
  element.addEventListener('mouseover', ()=> {
    starsActive = Array.prototype.slice.call(stars, 0, index+1);
    starsActive.forEach((star) => {
      star.classList.add("star__item_active");
    });
  });
  
  element.addEventListener('mouseout', ()=> {
    stars.forEach((star) => {
      star.classList.remove("star__item_active");
    });
  });
  
  element.addEventListener('click', ()=> {
    stars.forEach((star) => {
      star.classList.remove("star__item_select");
    });
    starsActive.forEach((star) => {
      star.classList.add("star__item_select");
    });
     starsSelect = starsActive;
  });
  
});