JSFiddle - React, Tailwind, and code Playground

HTML

Choose to show either active or inactive:
<select>
    <option data-active="T">Active</option>
    <option data-active="F">Inactive</option>
    <option data-active="T">Active</option>
    <option data-active="F">Inactive</option>
    <option data-active="T">Active</option>
    <option data-active="F">Inactive</option>
    <option data-active="T">Active</option>
    <option data-active="F">Inactive</option>
</select>
<button class="active">Show Active</button>
<button class="inactive">Show Inactive</button>

JavaScript

$.fn.toggleOption = function( show ) {
    return this.each(function(){
        $(this).toggle(show);
        if(show){
            if($(this).parent('span.toggleOption').length) $(this).unwrap();
        } else {
            $(this).wrap('<span class="toggleOption" style="display: none;" />');
        }
    });
};

var list = $('select option'), buttons = $('button');

list.toggleOption(false);

buttons.on('click', function () {
    var filter = $(this).hasClass('active') ? "[data-active=F]" : "[data-active=T]";
    list.toggleOption(true).filter(filter).toggleOption(false);
});