JSFiddle - React, Tailwind, and code Playground

by Paul Comanici

HTML

<div id="beneath" class="sameCss"></div>
<div id="above" class="sameCss"></div>

CSS

#beneath {
    background: #f00;
}
#above {
    background: #00f;
}
.sameCss {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
}

JavaScript

//function executed when you click on element with id: beneath
function clickOnBeneath() {
    alert("beneath click");
}

//function executed when you click on element with id: above
function clickOnAbove() {
    var beneathEl;
    beneathEl = document.getElementById("beneath");
    beneathEl.click();
}

//attach click event on element with id: above and beneath
function attachClickOnElements() {
    var aboveEl,
        beneathEl;
    aboveEl = document.getElementById("above");
    aboveEl.addEventListener("click", clickOnAbove, false);
    beneathEl = document.getElementById("beneath");
    beneathEl.addEventListener("click", clickOnBeneath, false);
}

attachClickOnElements();