I have an SVG with large circles connected to small squares. The circles have classes A, B, C, etc. and the squares have corresponding classes, though some have more than one. I need a way to click on a circle and add a class to all elements that contain that class. Conversely, I also need to be able to click on a square, and have it add a class to all circles that match the array of classes. I'm sure this is easy, though I'm afraid I'm not experienced enough to have figured it out. Here's what I have so far.

// Click on circle to highlight boxes and connected lines
$('body').on('click','circle, ellipse, .program',function() {
    var className = $(this).attr('class');
    var classArr = className.split(/\s+/);
    $("svg circle, svg path, svg ellipse").each(function() {
        var indvClass = $(this).attr('class');
        if ($.inArray(indvClass, classArr) !== -1 || $(this).hasClass('active')) {
            $(this).toggleClass('active');
            $(this).closest('.line').toggleClass('active');
        }
   })
});

EDIT --

Is it possible that it's firing before the SVG loads? I have updated my code, but it's not working in production.

$( '.mapsvg-wrap' ).find( 'circle, ellipse, path' ).click( function() {
        var isActive = $( this ).hasClass( 'active' );
        var classList = $( this ).attr( 'class' ).split( /\s+/ );
        $( '.active' ).removeClass( 'active' );
        if ( ! isActive ) {
            $.each( classList, function( index, className ) {
                if ( 'active' != className ) {
                    $( '.' + className ).addClass( 'active' );
                } else {
                    $( '.active' ).removeClass( 'active' );
                }
            } );
        }
    });