JSFiddle - React, Tailwind, and code Playground

HTML

<div class='modules'>
    <button class='edit'>Edit</button>
    <div class='overlay'>
        <p>Hello!</p>
        <button class='close'>Close</button>
    </div>
</div>
<div class='modules'>
    <button class='edit'>Edit</button>
    <div class='overlay'>
        <p>Welcome!</p>
        <button class='close'>Close</button>
    </div>
</div>

CSS

.modules {
    /*optional!*/
    margin:10px;
}
.overlay {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:none;
    /*optional!*/
    padding:20px;
    /*optional!*/
    background:yellow;
}

JavaScript

window.onload = function init() {
    modules = document.getElementsByClassName('modules');
    len = modules.length;
    var i = 0;
    for (; i < len; i++) {
        modules[i].getElementsByClassName('edit')[0].addEventListener('click', showOverlay);
        modules[i].getElementsByClassName('close')[0].addEventListener('click', hideOverlay);
    }
}

function showOverlay() {
    this.nextElementSibling.style.display = 'block';
}

function hideOverlay() {
    var overlays = document.getElementsByClassName('overlay');
    for (var i = 0; i < len; i++) {
        if (overlays[i].style.display === 'block') {
            overlays[i].style.display = 'none';
            return;
        }

    }
}