JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css">
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<select multiple="multiple" style="width: 100%; height: 500px;">
    <optgroup label='name1'>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </optgroup>
    <optgroup label='name2'>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </optgroup>
    <select>

JavaScript

$('select optgroup option').click(function () {
    var len = $(this).parent().find(':selected').length
    if (len > 1) {
        alert('only 1 allowed')
        $(this).prop('selected', false)
    }
});