JSFiddle - React, Tailwind, and code Playground

HTML

<h4><span class="mono">this</span> vs <span class="mono">e.target</span> example</h4>

<button>outer <span class="wrong-target">inner</span>

</button>
<br>
<div class="res">
    <ul>
        <li>using <span class="mono">this</span>:</li>
        <li id="asthis">-</li>
        <li>using <span class="mono">e.target</span></li>
        <li id="astarget">-</li>
    </ul>
</div>

CSS

* {
    font-family: Ubuntu, sans-serif;
}
button {
    background-color: white;
    border: 1px solid #c1c1c1;
}
button:hover {
    cursor: pointer;
    background-color: #ddd;
}


span.mono {
    font-family: "DejaVu Sans Mono", monospace;
    background: #eee;
}


ul li {
    font-size: 12px;
    margin: 5px 0;
}

JavaScript

$('button').on('click', function (e) {
    var $this = this,
        target = e.currentTarget;

    console.log("--");
    console.log("this:");
    console.log($this);

    console.log("e.target:");
    console.log(target);
    
    $('#asthis').text($this.outerHTML);
    $('#astarget').text(target.outerHTML);

});