JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rate-elems">
        <div class="elem1"></div>
        <div class="elem2"></div>
        <div class="elem3"></div>
        <div class="elem4"></div>
        <div class="elem4"></div>
        <div class="elem4"></div>
    </div>

CSS

[class^="elem"] {
                width: 100px;
                height: 100px;
                background-color: #f00;
                display: inline-block;
                float: left;

               
            }
            [class^="elem"]:first-child {
              border-top-left-radius: 13px;
              border-bottom-left-radius: 13px
            }
            [class^="elem"]:last-child {
              border-top-right-radius: 13px;
              border-bottom-right-radius: 13px
            }
            .start {
                background-color: #000;
            }
            .color {
                background-color: #000;
            }

JavaScript

var elems       = document.body.querySelectorAll("[class^='elem']"),
    arrElems    = [].slice.call(elems),
    rateElems   = document.body.getElementsByClassName("rate-elems")[0];

rateElems.addEventListener("mouseleave", function (e) {
    if(!document.body.querySelector(".stop")) {
        arrElems.forEach( function(element, index) {
            element.classList.remove("color");
        });
    } else {
        return;
    }
});

function makeCounter() {
	// замыкание
  function counter() {
    return counter.currentCount++;
  };
  
  counter.currentCount = 1;

  return counter;
}
var counter = makeCounter();

rateElems.addEventListener("click",function(e){
	// counter должен стоять в самом начале, иначе после первого false
  // выполнение до него не дойдет, счетчик не будет увеличен и будут ошибки
	if(counter() % 3 === 0 && document.body.querySelector(".start") && document.body.querySelector(".stop")) { 			
  	arrElems.forEach(function(element, index){
    	element.classList.remove("start", "stop", "color");
    });
  };
});
 

for (var i = 0; i < elems.length; i++) {
    var start;
    var elem = elems[i];
 
    elem.addEventListener("click", function (e) {
        // если есть элемент с классом start
        if(document.body.querySelector(".start")) {
            // и отсутствует элемент с классом .stop
            if(!document.body.querySelector(".stop")) {
                // добавляем
                e.target.classList.add("stop");
            }
        } else {
            start = e.target;
            e.target.classList.add("start");
        };
    });
 
    elem.addEventListener("mouseenter", mouseoverListener);
};

function mouseoverListener (e) {
    if(document.body.querySelector(".stop")) return;
    if(document.body.querySelector(".start")) {

        var startIndex = arrElems.indexOf(start);
        var stopIndex = arrElems.indexOf(e.target);

        if(startIndex > stopIndex) {
            colorizeBetween(startIndex, stopIndex, "left");

    ...