JSFiddle - React, Tailwind, and code Playground

HTML

<div id="window">
    <div id="wall">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
     <div id="wall">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

CSS

#window {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 400px;
}

#wall {
    position: relative;
}
.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #f00;
    z-index: 4;
}
#overlay {
    position: absolute;
    background: #000;
    z-index: 5;
}

JavaScript

$('.box:eq(1)').css('left', '102px');
$('.box:eq(2)').css('left', '204px');

$('.box').on('click', function() {
    $('<div id="overlay"></div>').css({
        'left': $('#window').position().left + 'px',
        'top': $('#window').position().top + 'px',
        'width': $('#window').width() + 'px',
        'height': $('#window').height() + 'px',
        'opacity': 0.8
    }).appendTo('body');
    
    $(this).css('z-index', 6);
});

$(document).on('click', '#overlay', function() {
    $(this).remove();
    $('.box').css('z-index', 4);
});