JSFiddle - React, Tailwind, and code Playground

by Krzysztof Niecikowski

HTML

<div id="email"><button data-id='1'>Open Overlay 1</button></div>
<div id="email"><button data-id='2'>Open Overlay 2</button></div>

<div id="overlay" class='email1'>
    <p>Overlay 1</p>
    <button data-id='1'>Close overlay 1</button>
</div>
<div id="overlay" class='email2'>
    <p>Overlay 2</p>
    <button data-id='2'>Close overlay 2</button>
</div>

CSS

#overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: lightgray;
    width: 95%;
    height: 95%;
}

#overlay.active {
    display: block;
}

JavaScript

$("[id^=email]").find("button").click(function() {
    var elem = $(this), overlayid = elem.attr('data-id'); 
    $('.email' + overlayid).addClass("active");
});

$("[id^=overlay]").find("button").click(function() {
		var elem = $(this), overlayid = elem.attr('data-id'); 
    $('.email' + overlayid).removeClass("active");
});