JSFiddle - React, Tailwind, and code Playground

HTML

<select id="bandmembers" multiple="multiple" size="10">
    <optgroup label="Queen" id="qaz">
        <option value="Mercury">Freddie</option>
        <option value="May">Brian</option>
        <option value="Taylor">Roger</option>
        <option value="Deacon">John</option>
    </optgroup>
    <optgroup label="Pink Floyd">
        <option value="Waters">Roger</option>
        <option value="Gilmour">David</option>    
        <option value="Mason">Nick</option>                
        <option value="Wright">Richard</option>
    </optgroup>
</select>

JavaScript

//$('select').mouseup(selectSiblings);
$('#bandmembers').click(selectSiblings);
function selectSiblings(ev) {
    console.log($(this).val());
    var clickedOption = $(ev.target);
    var siblings = clickedOption.siblings();
   
    if (clickedOption.is(":selected")) {
        siblings.attr("selected", "selected");
    } else {
        siblings.removeAttr("selected");
    }
}