Javascript Returning values with Form Optgroup parent

I would like to return the option values selected in a multiple option select box It works it I do not have a optgroup tags in. As soon as I add in the these tags, I cannot get the child values. I am sure this is a noddy question but I cannot find the correct syntax to get the correct array which is dropdown.options

$('#mydropdown option').click(function(evt) {
  var selectedOption = evt.target;
  var dropdown = this.parentNode;
  queue.add(selectedOption.value);
  Array.from(dropdown.options).forEach(function(option) {
    if (!option.selected) {
      queue.remove(option.value);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="mydropdown" multiple="multiple">
  <optgroup label="Group 1">
    <option value="optionx Fruits" selected>Fruits</option>
    <option value="optionx Vegetables">Vegetables</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="optionx Nuts">Nuts</option>
    <option value="optionx Meats">Meats</option>
  </optgroup>

</select>

Solution

We can just create a new set each time

This is important if you want the set to contain only selected ones.

If you want the set to contain what the user selected and KEEP it when the user unselect, then just add

Also notice I trigger the change to initialise the set when loading

let queue;
$('#mydropdown').on("change", function(evt) {
  queue = new Set();
  $("option:selected",this).each(function() { queue.add(this.value) });
  console.log("changed -------")
  for (const item of queue) console.log(item)
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="mydropdown" multiple="multiple">
  <optgroup label="Group 1">
    <option value="optionx Fruits" selected>Fruits</option>
    <option value="optionx Vegetables">Vegetables</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="optionx Nuts">Nuts</option>
    <option value="optionx Meats">Meats</option>
  </optgroup>

</select>

IF you want to keep the order selected, you will indeed need to just add and then remove

let queue = new Set();

$('#mydropdown').on("click", function(evt) {
  $(this).find("option").each(function() {
    queue.add(this.value); 
    if (!this.selected) queue.delete(this.value)
  })
  console.log("changed -------")
  for (const item of queue) console.log(item)
}).click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="mydropdown" multiple="multiple">
  <optgroup label="Group 1">
    <option value="optionx Fruits" selected>Fruits</option>
    <option value="optionx Vegetables">Vegetables</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="optionx Nuts">Nuts</option>
    <option value="optionx Meats">Meats</option>
  </optgroup>

</select>