JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select id="ranktype" name="ranktypeselect[]" multiple="multiple" size="5" style="display: none;">
  <optgroup label="OFF">
    <option>QB</option>
    <option>RB</option>
    <option>WR</option>
    <option>TE</option>
    <option>OL</option>
  </optgroup>
  <optgroup label="IDP">
    <option>NT</option>
    <option>DT</option>
    <option>DE</option>
    <option>DL</option>
    <option>DB</option>
    <option>LB</option>
    <option>SF</option>
    <option>CB</option>
  </optgroup>
  <optgroup label="ETC">
    <option>K</option>
    <option>P</option>
    <option>LS</option>
    <option>D/ST</option>
  </optgroup>
</select>

CSS

.group-result {
    cursor: pointer !important;
}

JavaScript

$('#ranktype').chosen({width: '95%', height: '40px'});

// Add select/deselect all toggle to optgroups in chosen
$(document).on('click', '.group-result', function() {
    // Get unselected items in this group
    var unselected = $(this).nextUntil('.group-result').not('.result-selected');
    if(unselected.length) {
        // Select all items in this group
        unselected.trigger('mouseup');
    } else {
        $(this).nextUntil('.group-result').each(function() {
            // Deselect all items in this group
            $('a.search-choice-close[data-option-array-index="' + $(this).data('option-array-index') + '"]').trigger('click');
        });
    }
});