JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thebox">
    <span id="hello">Hello!</span>
    <span id="hello2">Hello!</span>
</div>

<div id="targetinfo">
    <p>target: <span id="target"></span><br />
    currentTarget: <span id="currenttarget"></span></p>
</div>

CSS

#thebox{
    background-color: #FFF;
    height: 100px;
    width: 100px;
    border: 1px solid #000000;
}

#hello{
    border: 1px solid #ff0000;
    text-align: center;
    display: block;
    cursor: pointer;
    margin-top: 35px;
}
#hello2{
    border: 1px solid #ff0000;
    text-align: center;
    display: block;
    cursor: pointer;
    margin-top: 35px;
}

JavaScript

$(function(){
    $("#thebox").on('click', function(e){
        $('#target').text(e.target.id);
        $('#currenttarget').text(e.currentTarget.id);
    });
});