On hover, after an if condition, toggle class, then after clicking toggle modal

Hey, looking for a way to make this work.

I have a reservable class on ID, that gets added based on current amount of students registered - if count < max, class reservable is added. I'm also looking for how to avoid doing this, since I'd rather like to check for it in js, as the user could add the class by hand via dev tools.

However, I also need to check whether the time hasn't already started - this needs to be dynamic as the user could be on the site for the duration of a session and when a new hour starts it shouldn't be clickable. Current JS:

    $(document).ready(function(){
        $(".reservable").click(function() {
            var time = new Date();
            var hour = $(this).attr('data-time');
            var day = $(this).attr('data-day');
            var split = dates[day].split('.');
            var someday = new Date(parseInt({{$year}}), split[1]-1, split[0], hour, 0, 0, 0);
            if (time < someday) {
                document.getElementById("id").value = $(this).attr('data-id');
                $(".modal-header h5").html("Rezervace na den " + dates[day] + " v čase " + hour + ':00 - ' + hour + ':50');
                $('#modal-reservation').modal('toggle');
            }
        });
    });

day - number of workday in week (0-4) hour - starting hour in schedule id - id of time in db