JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<div class="rating">
  <input value="1">
  <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; 
  }
}

JavaScript

const list = document.querySelectorAll('.star');

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