Bootstrap-select plugin shows empty option, why?

Question

css

The bootstrap-select plugin shows an empty option . The plugin works, styles the select itself, but the option shows empty

<div class="selection_wrapper d-flex align-items-center">
  <div class="container">
    <div class="row">
      <div class="col-lg-2">
        <select class="selectpicker" name="" id="">
          <option value="Gender">Gender</option">
          <option value="Male">Male</option>
          <option value="Wooman">Wooman</option>
        </select>
      </div>
      <div class="col-lg-2">
        <select class="selectpicker" name="" id="">
          <option selected hidden>Price</option>
          <option value="">1</option>
          <option value="">2</option>
        </select>
      </div>
      <div class="col-lg-2">
        <select name="" id="">
          <option selected hidden>Material</option>
          <option value="">1</option>
          <option value="">2</option>
        </select>
      </div>
      <div class="col-lg-2">
        <select name="" id="">
          <option selected hidden>Size</option>
          <option value="">1</option>
          <option value="">2</option>
        </select>
      </div>
      <div class="col-lg-2">
        <select name="" id="">
          <option selected hidden>Color</option>
          <option value="">1</option>
          <option value="">2</option>
        </select>
      </div>
      <div class="col-lg-2">
        <select name="" id="">
          <option selected hidden>Type</option>
          <option value="">1</option>
          <option value="">2</option>
        </select>
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 4
  });
})

Answer 1

What if we add a unique name to each select?