JSFiddle - React, Tailwind, and code Playground

by Joe Mottershaw

HTML

<select id="one" name="one" class="enhance">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

<select id="two" name="two" class="enhance">
    <option value="x">X</option>
    <option value="y">Y</option>
    <option value="z">Z</option>
</select>

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    
select {
    width: 100%;
    margin: 0 0 20px;
}

.custom {
    width: 100%;
    position: relative;
}

.custom.is-active .head {
    border-color: red;
}

.custom.is-active .dropdown {
    display: block;
}

.head {
    width: 100%;
    height: 30px;
    margin: 0 0 20px;
    border: 1px solid #000;
    position: relative;
}

.dropdown {
    display: none;
    width: 100%;
    height: 200px;
    background: #fff;
    border: 1px solid #000;
    border-top-width: 0;
    position: absolute;
    top: 100%;
    z-index: 2;
}

JavaScript

;(function($, window, document, undefined) {

    // Core
    	$.enhance = function(element, options) {

            // Variables (elements)
                var $element = $(element);
            		$custom = $('<div>', { 'class': 'custom' }),
                	$head = $('<div>', { 'class': 'head' }),
                	$dropdown = $('<div>', { 'class': 'dropdown' });

            // Variables (data)
                var plugin = this,
                    element = element,
                    defaults = {
                        callbackOpen: function() {},
                        callbackClose: function() {},
                    }

            // Extend defaults
            	plugin.options = $.extend({}, defaults, options);

       		// Constructor
        		plugin.init = function() {
                    $custom.data({
                        'callbackOpen': plugin.options.callbackOpen,
                        'callbackClose': plugin.options.callbackClose,
                    });
                    
                	$element.after($custom.append($head, $dropdown));
       			}

            // Open
                plugin.open = function($custom) {
                    $custom.addClass('is-active');
                    
                    $custom.data('callbackOpen').call();
                }

            // Close
                plugin.close = function($custom) {
                    $custom.removeClass('is-active');
                    
                    $custom.data('callbackClose').call();
                }

       		// Initialize
        		plugin.init();

    	}


    // Add plugin to the jQuery.fn object
    	$.fn.enhance = function(options) {

            // Iterate through the DOM elements
            	return this.each(function() {

                    // Check plugin element attached
                    	if (undefined == $(this).data('enhance')) {

                            // Create a new instance of the plugin
                            	var plugin =...