Remove class from DIV if below certain index

I find it very difficult to explain what I want, so I made a violin as well as a live example. My fiddle is here:

https://jsfiddle.net/a31anx7n/2/

After clicking on the div and moving the mouse, any divs that were hovered are given the class highlight

. It's ok and I'm happy with it. Hovewer, then I climb up the divs that were highlighted. I want to remove a class from these divs. How should I do it? Check out the live example and you will see what I am trying to achieve:

http://wordpressbooking.systems/example/default-calendar/ (scroll a little bit down for demo)

code

var clicked = false;
var cindex = 0;
var lastone = 0;
var index = 0;
var index2 = 0;

$('.td').click(function() {
    clicked = true;
    cindex = $(this).index();
    $(this).addClass('highlight');
});

$('.td').hover(function() {
    if(clicked) {
        index = $(this).index();
        if(index > cindex) {
            $(this).addClass('highlight');
        }
    }
}, function () {
    if(clicked) {
        index2 = $(this).index();
        if(index2 > lastone) {
            //$('.td').removeClass('highlight');
        }
    }
});