JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cell u1 u2">u1</div>
<div class="cell u5 u1">u5</div>
<div class="cell u10 u5">u10</div>
<div class="cell u13 u5">u13</div>
<div class="cell u1602 u13">u1602</div>

CSS

.cell {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #eeeeee;
}

.cell.active {
    background-color: #ee0000;
}

JavaScript

function getParents(classList) {
    var $children = $('.' + classList),
        $parents = $('.' + classList);
    $parents.each(function() {
        var $this = $(this),
            thisClassList = $this.attr('class').split(' ');
        if ( thisClassList[1] != classList[2] ) {
            $parents = $parents.not($this);
        }
        if ( thisClassList[2] != classList[1] ) {
            $children = $children.not($this);
        }
    });
    console.log($children.length);
    return [$children, $parents];
}

$(document)
    .on('mouseenter', '.cell', function() {
        var $this = $(this),
            classList = $this.attr('class').split(' '),
            $set = getParents(classList),
            $parents = $set[0],
            $children = $set[1];
        $this.addClass('active');
        $parents.addClass('active');
        $children.addClass('active');
    })
    .on('mouseleave', '.cell', function() {
        var $this = $(this),
            classList = $this.attr('class').split(' '),
            $set = getParents(classList),
            $parents = $set[0],
            $children = $set[1];
        $this.removeClass('active');
        $parents.removeClass('active');
        $children.removeClass('active');
    });