JSFiddle - React, Tailwind, and code Playground

HTML

<label class="select">
    <select>
        <option>Body Fat</option>
        <option>Height</option>
        <option>Jean Size</option>
        <option>Chest</option>
        <optio>Pulse</option>
    </select>
</label>
<label class="select">
    <select>
        <option>Body Fat</option>
        <option>Height</option>
        <option>Jean Size</option>
        <option>Chest</option>
        <optio>Pulse</option>
    </select>
</label>
<label class="select">
    <select>
        <option>Body Fat</option>
        <option>Height</option>
        <option>Jean Size</option>
        <option>Chest</option>
        <optio>Pulse</option>
    </select>
</label>

CSS

.select {
    display:block;
    padding:10px;
    background:orange;
    margin:10px;
}

JavaScript

$('body')
    .on('click', '.select', function (event) {
    event.preventDefault();

    var i = $('.select').index($(this)),
        e = document.createEvent('MouseEvents');

    e.initMouseEvent('mousedown');
    $('select')[i].dispatchEvent(e);

});