Remove class from DIV when it's below certain index

Question

It's really hard to explain for me what I want so I made a fiddle and there's also a live example. My fiddle is here:

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

After clicking on div and moving mouse done, all divs that was hovered gets class highlight. That's ok and I'm happy with it. Hovewer then I go up divs whose were highlighted stays highlighted. I want to remove class from this divs. How do I do it ? Please check live example and you will understand what I'm 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');
        }
    }
});

Answer 1

I am off to bed, but have a look at this

fiddle

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