JSFiddle - React, Tailwind, and code Playground

HTML

<div id="selection">
    <li>
        <p>press me</p>
        <div class="overlay">
            <div class="close">close</div>
        </div>
    </li>
    <li>
        <p>press me</p>
        <div class="overlay">
            <div class="close">close</div>
        </div>
    </li>
    <li>
        <p>press me</p>
        <div class="overlay">
            <div class="close">close</div>
        </div>
    </li>
</div>

CSS

li {
    width:100px;
    height:100px;
    float:left;
    margin:10px;
    border:1px solid #000;
    list-style:none;
}

li p {
    text-align:center;
}

li .overlay {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    opacity:0;
    z-index:-9;
    background:#eee;
}

li .overlay .close {
    margin-top:50px;
    text-align:center;
}

JavaScript

$('#selection li').click(function() {
	$(this).find('.overlay').css('opacity','1');
	$(this).find('.overlay').css('z-index','9999');
});
			
$('.close').click(function(e) {
    e.stopPropagation();
	$(this).parent().css('opacity','0');
	$(this).parent().css('z-index','-999');
});