Selection of two elements by hover. JS DOM elements map raphael

Question

JavaScript

So, there is a canvas r on which a map is drawn, each element of the map is a home element, it turned out to make the table element highlight when you click on it, tell me how to do the opposite for highlighting and clicking on the table. Those that pointed to the line of the table and the corresponding element on the map was highlighted. Link to the demo learn.javascript.ru/play/JHG4C And it would be great if they tell me how to make the table in a couple of columns, or in the form of a checkbox.

obj
    .hover(function(){

        this.animate({
            fill: '#1669AD'
        }, 300)
        table.find('tr').css('background-color', '')
        table.find('#'+this.id).css('background-color', '#007fff');
        ;
    }, function(){
        this.animate({
            fill: attributes.fill
        }, 300)
        table.find('tr').css('background-color', '')
        table.find('#'+this.id).css('background-color', '');
        ;
    })
    .click(function(){
        document.location.hash = arr[this.id];

        var point = this.getBBox(0);

        $('#map').next('.point').remove();

        $('#map').after($('<div />').addClass('point'));

        $('.point')
        .html(paths[arr[this.id]].name)
        .prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
        .prepend($('<img />').attr('src', 'flags/'+arr[this.id]+'.png'))
        .css({
            left: point.x+(point.width/2)-80,
            top: point.y+(point.height/2)-20
        })
        .fadeIn();