JSFiddle - React, Tailwind, and code Playground

HTML

<div id="back-div">
    <p class="tobeclicked">this span can be clicked from above the front-div</p>
    <p class="tobeclicked">this span can be clicked from above the front-div</p>
    <p class="tobeclicked">this span can be clicked from above the front-div</p>
    <p class="tobeclicked">this span can be clicked from above the front-div</p>
    <p class="tobeclicked">this span can be clicked from above the front-div</p>
</div>

<div id="front-div"></div>
<div id="result"></div>

CSS

#back-div{
    width: 400px;
    height: 200px;
    background: #cccccc;
}
#front-div{
    width: 100px;
    height: 100px;
    background: #666666;
    position: absolute;
    top: 50px;
    left: 100px;
}

JavaScript

$('#front-div').click(function (e) {
        $(this).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $(this).show();
});
$(".tobeclicked").click(function(){
    $("#result").append("clicked<br />");
});