JSFiddle - React, Tailwind, and code Playground
HTML
<select>
<optgroup label="NFC EAST">
<option value="DallasCowboys">Dallas Cowboys</option>
<option value="NewYorkGiants">New York Giants</option>
<option value="PhiladelphiaEagles">Philadelphia Eagles</option>
<option value="WashingtonRedskins">Washington Redskins</option>
</optgroup>
<optgroup label="NFC NORTH">
<option value="ChicagoBears">Chicago Bears</option>
<option value="DetroitLions">Detroit Lions</option>
<option value="GreenBayPackers">Green Bay Packers</option>
<option value="MinnesotaVikings">Minnesota Vikings</option>
</optgroup>
</select>
<button id="next">Next</button>
<button id="prev">Previous</button>
JavaScript
$('#next').on('click', function () {
var value = $('select option:selected').next('option').val() || $('select option:selected').parent().next().children('option').first().val();
if (value) $('select').val(value);
});
$('#prev').on('click', function () {
var value = $('select option:selected').prev('option').val() || $('select option:selected').parent().prev().children('option').last().val();
if (value) $('select').val(value);
});