JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.3.5/bootstrap-select.min.js"></script>
<div class="container">
    <select class="select-picker" id="picker1" data-size="10">
        <option>Opt 1</option>
        <option>Opt 2</option>
        <option>Opt 3</option>
        <option>Opt 4</option>
    </select>
    
    <select class="select-picker" id="picker2" data-size="10">
        <option>Opt 2.1</option>
        <option>Opt 2.2</option>
        <option>Opt 2.3</option>
        <option>Opt 2.4</option>
    </select>
</div>

JavaScript

$(document).ready(function() {
    $('.select-picker').selectpicker();
    
    $('.select-picker').change(function(){
        // Trying to open 2nd selectpicker
        $selectpickerButton = $('button[data-id="picker2"]');
        $selectpicker = $selectpickerButton.parent();
        
        //$selectpicker.addClass('open');
        $selectpickerButton.click();
    });
});