JSFiddle - React, Tailwind, and code Playground

HTML

<select id="MySelect" name="MySelect">
    <option value="">Select ...</option>
    <optgroup label="Group1" data-id="Group1">
        <option selected="selected" value="1">Value 1</option>
        <option value="2">Value 2</option>
    </optgroup>
    <optgroup label="Group2" data-id="Group2">
        <option value="3">Value 3</option>
        <option value="4">Value 4</option>
    </optgroup>
</select>

CSS

#MySelect optgroup {
    background-color: orange;
    cursor: pointer;
}

JavaScript

$(document).ready(function() {
    $("#MySelect").on('click', 'optgroup', function() {
        alert($(this).data('id'));
    });
});