bootstrap-select is used in multiple places in one page but only working for the first one

Question

I have used three bootstrap-select (https://silviomoreto.github.io/bootstrap-select/) in one page in my react component, I have followed all the instructions given, but only the first one is working properly and the other ones are not showing at all, here is the code snippet:

componentDidMount() { 
  $('.select').selectpicker();
  $('.selectpicker').selectpicker({ style: 'btn-info', size: 4 });
}

<div className="custom-select">
  <p className="font-300"> Drill Down Select </p>
  <select className="sidebar-select m-bot-1 selectpicker selectbg" onChange = {this.handleGraphTypeSelect.bind(this)}>
    <option selected disabled="disabled">Drill Downs</option>
    <option value="2_AXIS">Two axis graph</option>
    <option value="MULTIPLE_AXIS">Multiple axis</option>
    <option value="LOCATION">Location</option>
  </select>
</div>

the other two has the same classes and structures but different values

Answer 1

use different class selectors in JQuery will solve your current issues

like

$('.select').selectpicker(); $('.selectpicker').selectpicker({ style: 'btn-info', size: 4 });
$('.select1').selectpicker(); $('.selectpicker1').selectpicker({ style: 'btn-info', size: 4 });
$('.select2').selectpicker(); $('.selectpicker2').selectpicker({ style: 'btn-info', size: 4 });