JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://harvesthq.github.com/chosen/docsupport/style.css">
<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
<script src="http://harvesthq.github.com/chosen/chosen/chosen.proto.js"></script>
<!doctype html>
<html lang="en"><!-- Source is http://harvesthq.github.com/chosen/ -->
  <head>
    <meta charset="utf-8">
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Chosen - a javascript plug-in for jQuery and Prototype - makes select boxes better</title>
    <meta name="description" content="">
    <meta name="author" content="Patrick Filler, Harvest">

    <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <!--[if lt IE 9]>
      <script type="text/javascript">
      (function(){
        var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
        for(var i = 0; i < html5elmeents.length; i++){
          document.createElement(html5elmeents[i]);
        }

      })();
      </script>
    <![endif]-->
  </head>

  <body>
    <div id="container">
      <header>
        <a href="http://www.getharvest.com/">Built by Harvest</a>
        <h1>Chosen</h1>
      </header>
      <div id="content">
        <div id="container">
          <h2>Selected and Disabled Support</h2>
          <div class="side-by-side clearfix">
            <p>Chosen automatically highlights selected options and removes disabled options.</p>
            <div>
              <em>Multiple Select with Groups</em>
              <select id="bears_multiple" title="Your Favorite Types of Bear" style="width:350px;" multiple...

JavaScript

(function(Chosen) {
    function DynamicItem(chosenInstance) {
        (this.chosen = chosenInstance).search_results.up().insert({
            top: this.elContainer = $(document.createElement('div'))
        });
        this.elContainer.addClassName('chzn-results-additemcontainer');
        this.elContainer.insert(this.elButton = $(document.createElement('button')));
        Event.observe(this.elButton, 'click', this.addNewItem.bind(this));
    }
    DynamicItem.prototype = {
        constructor: DynamicItem,
        update: function(terms) {
            if ((this.text = terms).length) {
                this.elButton.update('Add new item "' + this.text + '"');
                this.elContainer.show();
            } else {
                this.elContainer.hide();
            }
        },
        addNewItem: function(terms) {
            this.chosen.form_field.options.add(new Option(this.text, this.text));
            Event.fire(this.chosen.form_field, "liszt:updated");
            this.chosen.result_highlight = this.chosen.search_results.childElements().pop();
            return this.chosen.result_select();
        }
    };

    Chosen.prototype.no_results = (function(fnSuper) {
        return function(terms) {
            (this.dynamicItemService || (this.dynamicItemService = new DynamicItem(this))).update(terms);
            return fnSuper.call(this, terms);
        };
    })(Chosen.prototype.no_results);
    Chosen.prototype.results_hide = (function(fnSuper) {
        return function() {
            this.dynamicItemService && this.dynamicItemService.elContainer.hide();
            return fnSuper.call(this);
        };
    })(Chosen.prototype.results_hide);
    Chosen.prototype.winnow_results_set_highlight = (function(fnSuper) {
        return function() {
            this.dynamicItemService && this.dynamicItemService.elContainer.hide();
            return fnSuper.apply(this, arguments);
        };
   ...