JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target" tabindex="-1"></div>
<button class="trigger">Click to trigger click</button>
<button class="trigger1">Click to dispatch click</button>

CSS

div{
    height:100px;
    width:100px;
    border:10px solid black;
}
#target:focus{
    background-color:#aaa;
}
.selected{
    border-color:red;
}

JavaScript

$('button.trigger').click(function(){
    $('div#target').trigger('click');
});

$('button.trigger1').click(function(){
    var event = new MouseEvent('click');
    var target = document.getElementById('target');
    target.dispatchEvent(event);
});

$('div#target').click(function(){
    $(this).addClass('selected');
});