JSFiddle - React, Tailwind, and code Playground

HTML

<select name="sizes" id="sizes" class="makePlain">
    <option value="xxs">XX-Small</option>
    <option value="xs">X-Small</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
    <option value="xl">X-Large</option>
    <option value="xxl">XX-Large</option>
</select>
<select name="sizes2" id="size2" class="makePlain">
    <option value="xxs">XX-Small</option>
    <option value="xs">X-Small</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
    <option value="xl">X-Large</option>
    <option value="xxl">XX-Large</option>
</select>

CSS

ul {
    border: 1px solid #000;
}
ul li {
    background-color: #f90;
    display: list-item;
}

ul li.unselected {
    background-color: #fff;
    display: none;
}

ul:hover li,
ul:hover li.unselected {
    display: list-item;
}

JavaScript

(function($) {
    $.fn.selectUI = function(){
        this.each(
                function() {
                      var $origSelect = $(this);
                        var newId = $(this).attr('name') + '-ul';
                        var numOptions = $(this).children().length;
                        
                        $('<ul id="' + newId + '" class="plainSelect" />')
                            .insertAfter($(this));
                        
                        for (var i = 0; i < numOptions; i++) {
                            var text = $(this).find('option').eq(i).text();
                           $('<li />').text(text).appendTo('#' + newId);
                        }
                        
                        if ($(this).find('option:selected')) {
                            var selected = $(this).find('option:selected').index();
                            $('#' + newId)
                                .find('li')
                                .not(':eq(' + selected + ')')
                                .addClass('unselected');
                        }
                        
                        $('#' + newId + ' li')
                            .hover(
                                function(){
                                    $(this).click(
                                        function(){
                                            var newSelect = $(this).index();
                                            $(this)
                                                .parent()
                                                .find('.unselected')
                                                .removeClass('unselected');
                                            $(this)
                                                .parent()
                                                .find('li')
                                                .not(this)
                                                .addClass('unselected');
            ...