JSFiddle - React, Tailwind, and code Playground

by schittuluri

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.multiselect/1.13/jquery.multiselect.css">
<script src="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/2.0.1/jquery.multiselect.js"></script>
<div id="Container">			<a class=" ms-ref-refinername" href="javascript: {}" onclick="EnsureScriptParams('SearchUI.js', 'Srch.SU.toggleRefCategory', this.parentNode, 'FileType')" onmouseup="this.blur();">
                    <div class="ms-displayInlineBlock" id="ctl00_ctl39_g_e947eeb2_c9f5_402d_8da4_d6972dcc1e56_csr_RefinerHeading_FileType">Result type</div>
                    <div class="ms-core-listMenu-item ms-ref-uparrow" id="refinerExpandCollapseArrow"></div>
                  </a>			<div class= "use-widget ms-ref-unselSec" id="UnselectedSection">				<div id="unselShortList" class="ms-ref-unsel-shortList">					<select id="FileTypeSelect" style="width: 200px; display: none;" multiple="multiple">						<option id="FileType_ChkGroup_html" name="FileType_ChkGroup" value="ǂǂ68746d6c">						html						 (7) 						</option>						<option id="FileType_ChkGroup_aspx" name="FileType_ChkGroup" value="ǂǂ61737078">						aspx						 (4) 						</option>						<option id="FileType_ChkGroup_xlsx" name="FileType_ChkGroup" value="ǂǂ786c7378">						xlsx						 (1) 						</option>					</select><button type="button" class=" ui-multiselect ui-widget ui-state-default ui-corner-all" id="FileTypeSelect_ms" style="width: 225px;"><span class="ui-icon ui-icon-triangle-1-s"></span><span>Select options</span></button>				</div>			</div>		</div>

JavaScript

/* jshint forin:true, noarg:true, noempty:true, eqeqeq:true, boss:true, undef:true, curly:true, browser:true, jquery:true */
/*
 * jQuery MultiSelect UI Widget 1.14pre
 * Copyright (c) 2012 Eric Hynds
 *
 * http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
 *
 * Depends:
 *   - jQuery 1.4.2+
 *   - jQuery UI 1.8 widget factory
 *
 * Optional:
 *   - jQuery UI effects
 *   - jQuery UI position utility
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 */
(function($, undefined) {

  var multiselectID = 0;
  var $doc = $(document);

  $.widget("ech.multiselect", {

    // default options
    options: {
      header: true,
      height: 175,
      minWidth: 225,
      classes: '',
      checkAllText: 'Check all',
      uncheckAllText: 'Uncheck all',
      noneSelectedText: 'Select options',
      selectedText: '# selected',
      selectedList: 0,
      show: null,
      hide: null,
      autoOpen: false,
      multiple: true,
      position: {},
      appendTo: "body",
      menuWidth:null
    },

    _create: function() {
      var el = this.element;
      var o = this.options;

      this.speed = $.fx.speeds._default; // default speed for effects
      this._isOpen = false; // assume no

      // create a unique namespace for events that the widget
      // factory cannot unbind automatically. Use eventNamespace if on
      // jQuery UI 1.9+, and otherwise fallback to a custom string.
      this._namespaceID = this.eventNamespace || ('multiselect' + multiselectID);

      var button = (this.button = $('<button type="button"><span class="ui-icon ui-icon-triangle-1-s"></span></button>'))
        .addClass('ui-multiselect ui-widget ui-state-default ui-corner-all')
        .addClass(o.classes)
        .attr({ 'title':el.attr('title'), 'tabIndex':el.attr('tabIndex'), 'id': el.attr('id') + '_ms' })
        .prop('aria-haspopup', true)
       ...