JSFiddle - React, Tailwind, and code Playground

HTML

<select id="food" multiple>
<optgroup label="Group1">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
<optgroup label="Group2">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
<optgroup label="Group3">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
</select>

CSS

select {width:200px;height:400px;}

JavaScript

$(document).ready(function(){
     $("optgroup").on("click", function() {
    $(this).children("option").prop("selected", "selected");
    $(this).next().children("option").prop("selected", false);
    $(this).prev().children("option").prop("selected", false);
}); 
});