Refresh dynamic select box in JavaScript with Bootstrap 5

General
1

Using bootstrap 5, I have the following html:

<select class="form-select">
<option hidden="hidden">17 kW</option>
<option>18 kW</option>
<option>19 kW</option>
<option>20 kW</option>
<option>22 kW</option>
<option selected="selected">24 kW</option>
<option>26 kW</option>
<option>28 kW</option>
<option>30 kW</option>
<option>32 kW</option>
<option hidden="hidden">34 kW</option>
</select>

Note the two hidden options.

The first time I click the select box I get the image on the left. The next time I click the select box I get the image on the right. Using Chrome as the browser.

image

Is there a way in javascript or jquery to refresh the select box to ensure proper display, before the box is displayed for the first time?

2 
$(document).ready(function() {
  $('select.form-select').each(function() {
    var select = $(this);
    var selected = select.find('option:selected');
    if (selected.prop('hidden')) {
      select.find('option').prop('hidden', false); // Unhide all
      selected.prop('hidden', true); // Hide only the selected if needed
    }
  });
});