JSFiddle - React, Tailwind, and code Playground

HTML

<div id="C" onclick="listener.call(this,event);">
    <div id="A">Click here - Event by browser fires once (OK)</div>
</div>

<div id="B">Click here - Event by trigger fires twice (NOK)</div>

CSS

div { padding: 4px; border: 1px solid black; margin: 4px; }

JavaScript

$(document).ready(function(){
    $('#B').on('click', function(){
        $('#A').trigger('click');
    });
});

function listener(event){
    console.log('clicked '+event.target.id+" "+this.id);
}