JSFiddle - React, Tailwind, and code Playground

HTML

<div id="line1" class="line"><div class="hasSVG" id="map0"></div><div class="hasSVG" id="map1"></div><div class="hasSVG" id="map2"></div><div class="hasSVG" id="map3"></div><div class="hasSVG" id="map4"></div><div class="hasSVG" id="map5"></div><div class="hasSVG" id="map6"></div><div class="hasSVG" id="map7"></div><div class="hasSVG" id="map8"></div><div class="hasSVG" id="map9"></div><div class="hasSVG" id="map10"></div><div class="hasSVG" id="map11"></div><div class="hasSVG" id="map12"></div><div class="hasSVG" id="map13"></div><div class="hasSVG" id="map14"></div><div class="hasSVG" id="map15"></div><div class="hasSVG" id="map16"></div><div class="hasSVG" id="map17"></div><div class="hasSVG" id="map18"></div><div class="hasSVG" id="map19"></div><div class="hasSVG" id="map20"></div><div class="hasSVG" id="map21"></div><div class="hasSVG" id="map22"></div><div class="hasSVG" id="map23"></div><div class="hasSVG" id="map24"></div><div class="hasSVG" id="map25"></div><div class="hasSVG" id="map26"></div></div>
<div id="line2" class="line"><div class="hasSVG" id="map27"></div><div class="hasSVG" id="map28"></div><div class="hasSVG" id="map29"></div><div class="hasSVG" id="map30"></div><div class="hasSVG" id="map31"></div><div class="hasSVG" id="map32"></div><div class="hasSVG" id="map33"></div><div class="hasSVG" id="map34"></div><div class="hasSVG" id="map35"></div><div class="hasSVG" id="map36"></div><div class="hasSVG" id="map37"></div><div class="hasSVG" id="map38"></div><div class="hasSVG" id="map39"></div><div class="hasSVG" id="map40"></div><div class="hasSVG" id="map41"></div><div class="hasSVG" id="map42"></div><div class="hasSVG" id="map43"></div><div class="hasSVG" id="map44"></div><div class="hasSVG" id="map45"></div><div class="hasSVG" id="map46"></div><div class="hasSVG" id="map47"></div><div class="hasSVG" id="map48"></div><div class="hasSVG" id="map49"></div><div class="hasSVG" id="map50"></div><div class="hasSVG" id="map51"></div><div...

CSS

.hasSVG {
    background: #000;
        border: 1px solid purple;
    float: left;
    height: 30px;
    width: 30px;
}
.line {
    float: left;
    margin: 10px 0;
}

JavaScript

function whereAreWe(myself,range){
        var items = [];
        var iAm = myself.index();
        var parent = myself.parent();
        var position = parent.is(':nth-child(even)');
        alert(position);
        var above = parent.prev().find('div');
        var below = parent.next().find('div');
        

        //Items left and right of item
        items.push(myself.siblings().slice(iAm-range,iAm));
        items.push(myself.siblings().slice(iAm,iAm+range));
        if(position){
            //Items Above
            items.push(above.siblings().slice(iAm+range,iAm+range));
            //Items below
            items.push(below.siblings().slice(iAm+range,iAm+range));
        }else{
            //Items Above
            items.push(above.siblings().slice(iAm-range,iAm+range));
            //Items below
            items.push(below.siblings().slice(iAm-range,iAm+range));
        }

        $.each(items,function(){
            var me = $(this);
            me.find('polygon').attr('fill','#840083');
        });

    }
    function clearStuff(){
        $('.hasSVG polygon').attr('fill','#B8E100');
    }

    $('.hasSVG').on('click', function(){
        //alert($("#map183").parent().is(':even'));
        clearStuff();
        $('.active').removeClass('active');
        $(this).addClass('active');
        whereAreWe($(this),2);
    });