Поможем! Динамическая ПОДСВЕТКА элементов МЕЖДУ двумя другими в контейнере

var parent = document.getElementsByClassName('tabs_calendar')[0];
    parent.onmouseover = function (e) {
        var e = e || event;
        var target = e.target;
        for (var i = 0; i < parent.children.length; i++) {
            if (parent.children[i] == target) return console.log(i);
        }
  }

        function backlight (selector) {
            var elems = document.querySelectorAll (selector),
                f = function () {
                    var p = this.parentNode, c = p.children, start, end, v,
                        getIndex = function (elm) {
                            for (var i = 0; i < c.length; i++) if (c[i] === elm) return i;
                        },
                        check = function (s, e) {
                            for (var i = 0; i < c.length; i++) c[i].style.background = (i >= s && i <= e) ? "red" : "";
                        };
                    if (this.hasAttribute ("data-backlight")) {
                        check (-1, -1);
                        this.removeAttribute ("data-backlight");
                        return;
                    }
                    if (!p.querySelector ("[data-backlight='start']")) {
                        this.setAttribute ("data-backlight", "start");
                        if (!p.querySelector ("[data-backlight='end']")) return;
                    }
                    if (!p.querySelector ("[data-backlight='end']")) this.setAttribute ("data-backlight", "end");
                    start = getIndex (p.querySelector ("[data-backlight='start']"));
                    end = getIndex (p.querySelector ("[data-backlight='end']"));
                    if (start > end) { v = end; end = start; start = v; }
                    check (start, end);
                };
            [].forEach.call(elems, function (e) {e.addEventListener ("click", f)});
        };
        window.addEventListener ("load", function () {
            backlight ("#parent > div");
        });

var elems       = document.body.querySelectorAll("[class^='elem']"),
    arrElems    = [].slice.call(elems);
 
 
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");
 
                // убираем все eventListeners можно mouseenter
                // было бы вынести в function definition и удалять
                // обычным путем
                arrElems.forEach( function(element, index) {
                    var elementClone = element.cloneNode(true);
                    element.parentNode.replaceChild(elementClone, element);
 
                });
            }
        } else {
            start = e.target;
            e.target.classList.add("start");
        };
    });
 
    elem.addEventListener("mouseenter", function (e) {
        // если есть элемент с классом старт
        if(document.body.querySelector(".start")) {
 
            var startIndex = arrElems.indexOf(start);
            var stopIndex = arrElems.indexOf(e.target);
 
            // если индекс больше индекса остановки 
            // меняем местами
            if(startIndex > stopIndex) {
                var cache = stopIndex;
                stopIndex = startIndex + 1;
                startIndex = cache;
            } else {
                stopIndex += 1;
            }
 
            // получаем все что между этими двумя индексами
            var arrBetween = arrElems.slice(startIndex, stopIndex);
            arrBetween.forEach( function(element, index) {
                // класс подсветки
                element.classList.add("color");
                // убрали курсор ==> удалили класс подсветки
                element.addEventListener("mouseout", function (e) {
                    e.target.classList.remove("color");
                });
            });
        };
    });
};

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;
    }
});
 
 
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");
 
        } else if (startIndex < stopIndex) {
            
            colorizeBetween(startIndex, stopIndex, "right");
        } else {
            arrElems.forEach( function(element, index) {
                element.classList.remove("color");
            });
        }
 
        function colorizeBetween (startIndex, stopIndex, direction) {
            if (direction === "right") {
                var stopIndex = stopIndex + 1;
                var arrBetween = arrElems.slice(startIndex, stopIndex);
                arrBetween.forEach( function(element, index) {
                    element.classList.add("color");
                });
 
                var arrLeftToStart = arrElems.slice(0, startIndex);
                arrLeftToStart.forEach( function(element, index) {
                    element.classList.remove("color");
                });
 
                var arrStopToEnd = arrElems.slice(stopIndex, arrElems.length);
                arrStopToEnd.forEach( function(element, index) {
                    element.classList.remove("color");
                }); 
            } else {
                var sta = startIndex;
                var sto = stopIndex;
                var startIndex = sto;
                var stopIndex = sta;
 
                var arrBetween = arrElems.slice(startIndex, stopIndex);
 
                var arrStartToRight = arrElems.slice(startIndex, arrElems.length);
                arrStartToRight.forEach( function(element, index) {
                    element.classList.remove("color");
                });
 
 
                arrBetween.forEach( function(element, index) {
                    element.classList.add("color");
                });
 
                var arrStopToEnd = arrElems.slice(0, startIndex);
                arrStopToEnd.forEach( function(element, index) {
                    element.classList.remove("color");
                }); 
            };
        };
    };
};

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");
    });
  };
});