JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="search_engine" id="search_engine" class="hear" value="search_engine" />
<input type="checkbox" name="search_engine1" id="search_engine1" class="hear" value="search_engine1" />
<input type="checkbox" name="search_engine2" id="search_engine2" class="hear" value="search_engine2" />

<select id="countries">
<option value="1">Country</option>
</select>

JavaScript

var doClick = function() {
    'use strict';
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    return event;
}

$('.hear').click(function() {
    'use strict';
    $('#countries').focus().get(0).dispatchEvent(doClick());
});