JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group">
<p class="col-sm-3 control-label">Restricted Countries:</p>
<div class="col-sm-9 col-md-6">
<select rel="dropdown" name="restrictCountry[]" multiple id="restrictCountry">
<option value="253">Austria</option>
<option value="252">Belgium</option>
<option value="266">Bulgaria</option>
<option value="270">Croatia</option>
<option value="274">Czech Republic</option>
<option value="254">Denmark</option>
<option value="262">Estonia</option>
<option value="258">Finland</option>
<option value="247">France</option>
<option value="248">Germany</option>
<option value="260">Gibraltar</option>
<option value="265">Greece</option>
<option value="243">Guernsey</option>
<option value="267">Hungary</option>
<option value="264">Iceland</option>
<option value="246">Ireland</option>
<option value="244">Isle of Man</option>
<option value="255">Italy</option>
<option value="245">Jersey</option>
<option value="263">Latvia</option>
<option value="259">Lithuania</option>
<option value="275">Luxembourg</option>
<option value="273">Malta</option>
<option value="242">Montenegro</option>
<option value="249">Netherlands</option>
<option value="268">Norway</option>
<option value="241">Palestine, State of</option>
<option value="250">Poland</option>
<option value="261">Portugal</option>
<option value="272">Romania</option>
<option value="277">Serbia</option>
<option value="271">Slovakia</option>
<option value="256">Slovenia</option>
<option value="251">Spain</option>
<option value="257">Sweden</option>
<option value="269">Switzerland</option>
<option value="276">Turkey</option>
</select>
</div>
</div>

CSS

.ms-options-wrap,
.ms-options-wrap * {
  box-sizing: border-box;
  list-style-type: none;
}

.ms-options-wrap > button:focus,
.ms-options-wrap > button {
  position: relative;
  width: 100%;
  text-align: left;
  border: 1px solid #aaa;
  background-color: #fff;
  padding: 5px 20px 5px 5px;
  margin-top: 1px;
  font-size: 13px;
  color: #aaa;
  outline: none;
  white-space: nowrap;
}

.ms-options-wrap > button:after {
  content: ' ';
  height: 0;
  position: absolute;
  top: 50%;
  right: 5px;
  width: 0;
  border: 6px solid rgba(0, 0, 0, 0);
  border-top-color: #999;
  margin-top: -3px;
}

.ms-options-wrap > .ms-options {
  position: absolute;
  left: 0;
  width: 100%;
  margin-top: 1px;
  margin-bottom: 20px;
  background: white;
  z-index: 2000;
  border: 1px solid #aaa;
  text-align:left;
}

.ms-options-wrap > .ms-options > .ms-search input {
  width: 100%;
  padding: 4px 5px;
  border: none;
  border-bottom: 1px groove;
  outline: none;
}

.ms-options-wrap > .ms-options .ms-selectall {
  display: inline-block;
  font-size: .9em;
  text-transform: lowercase;
  text-decoration: none;
}
.ms-options-wrap > .ms-options .ms-selectall:hover {
  text-decoration: underline;
}

.ms-options-wrap > .ms-options > .ms-selectall.global {
  margin: 4px 5px;
}

.ms-options-wrap > .ms-options > ul > li.optgroup {
  padding: 5px;
}
.ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {
  border-top: 1px solid #aaa;
}

.ms-options-wrap > .ms-options > ul > li.optgroup .label {
  display: block;
  padding: 5px 0 0 0;
  font-weight: bold;
}

.ms-options-wrap > .ms-options > ul label {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 8px 4px;
  margin: 1px 0;
}

.ms-options-wrap > .ms-options > ul li.selected label,
.ms-options-wrap > .ms-options > ul label:hover {
  background-color: #efefef;
}

.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
  margin-right: 5px;
  position: absolute;
  left: 4px;
  top: 7px;
}

JavaScript

(function($){
	var defaults = {
		placeholder   : 'Select options', // text to use in dummy input
		columns       : 1,                // how many columns should be use to show options
		search        : false,            // include option search box
		// search filter options
		searchOptions : {
			'default'    : 'Search',             // search input placeholder text
			showOptGroups: false,                // show option group titles if no options remaining
			onSearch     : function( element ){} // fires on keyup before search on options happens
		},
		selectAll     : false, // add select all option
		selectGroup   : false, // select entire optgroup
		minHeight     : 200,   // minimum height of option overlay
		maxHeight     : null,  // maximum height of option overlay
		showCheckbox  : true,  // display the checkbox to the user
		jqActualOpts  : {},    // options for jquery.actual

		// Callbacks
		onLoad        : function( element ) {  // fires at end of list initialization
			$(element).hide();
		},
		onOptionClick : function( element, option ){}, // fires when an option is clicked

		// @NOTE: these are for future development
		maxWidth      : null,  // maximum width of option overlay (or selector)
		minSelect     : false, // minimum number of items that can be selected
		maxSelect     : false, // maximum number of items that can be selected
	};

	var msCounter = 1;

	function MultiSelect( element, options )
	{
		this.element = element;
		this.options = $.extend( {}, defaults, options );
		this.load();
	}

	MultiSelect.prototype = {
		/* LOAD CUSTOM MULTISELECT DOM/ACTIONS */
		load: function() {
			var instance = this;

			// make sure this is a select list and not loaded
			if( (instance.element.nodeName != 'SELECT') || $(instance.element).hasClass('jqmsLoaded') ) {
				return true;
			}

			// sanity check so we don't double load on a select element
			$(instance.element).addClass('jqmsLoaded');

			// add option...