JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<div class="rating">
  <input value="1" id="rating-value">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

SCSS

.rating {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.star {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f00;
  
  &:hover,
  &:hover ~ & {
     background-color: #0f0; 
  }
}

#rating-value[value="1"] + .star {
  background-color: #0f0;
}

JavaScript

const list = document.querySelectorAll('.star');
const count = list.length;
const value = document.querySelector('#rating-value');

list.forEach(element => {
	element.addEventListener('click', () => {
    const index = [...element.parentElement.children].indexOf(element);
    const number = (count - index) + 1;
		
    value.value = number;
  }, true);
})