Работа с разными областями в таблице

Имеется таблица, x*y ячеек Необходимые для считывания данные в ячейках - только первый верхний ряд ячеек (обозначил td id='horizontal') и первый столбец (обозначил td id='vertical'), требуется по клику пользователя, что то вроде суммы координат только после второго клика (это или по вертикали, или по горизонтали) Нужно выделять только по одной ячейке в каждой области, а потом делать вычисление. Вот здесь все прекрасно работает, подсвечиваются только нужные ячейки при наведении мышки, и по вертикальным и по горизонтальным областям

$('#multitable').on('mouseenter', '#horizontal', function() {
        $(this).addClass('hover');
}).on('mouseleave', '#horizontal', function () {
        $(this).removeClass('hover');
});
$('#multitable').on('mouseenter', '#vertical', function() {
        $(this).addClass('hover');
}).on('mouseleave', '#vertical', function () {
        $(this).removeClass('hover');
});

А при кликах, корректно отрабатывает только на горизонтальной области (выделение по одной ячейке), по вертикальной предыдущее выделение так и остается, почему?

$('#multitable').on('click', '#horizontal', function() {
    $(this).parent().children().removeClass('active hover');
        $(this).addClass('active');
        var_one = $(this).text();
});
$('#multitable').on('click', '#vertical', function() {
    $(this).parent().children().removeClass('active hover');
    $(this).addClass('active');
    var_two = $(this).text();    
});

А дальше тупик - как динамически писать в переменную сумму выделенных ячеек, каждый раз обновляя при клике?