JSFiddle - React, Tailwind, and code Playground

HTML

<form action="test_submit" method="get" accept-charset="utf-8">
      <ol>        
        <li id="facebook-list" class="input-text">
          <label>FacebookList input</label>
          <input type="text" value="" id="facebook-demo" />
          <!-- <ul id="preadded" style="display:none">
              <li value="1">Jorge Luis Borges</li>
              <li value="2">Julio Cortazar</li>           
          </ul> -->
          <div id="facebook-auto">
            <div class="default">Type the name of an argentine writer you like</div> 
            <ul id="feed">
                      
            </ul>
          </div>
        </li>
		        <li id="facebook-list1" class="input-text">
          <label>FacebookList input</label>
          <input type="text" value="" id="facebook-demo1" style="display:none;" />
          <!-- <ul id="preadded" style="display:none">
              <li value="1">Jorge Luis Borges</li>
              <li value="2">Julio Cortazar</li>           
          </ul> -->
          <div id="facebook-auto1">
            <div class="default">Type the name of an argentine writer you like</div> 
            <ul id="feed1">
                      
            </ul>
          </div>
        </li>
      </ol>   
    </form>

CSS

/* TextboxList sample CSS */
ul.holder { margin: 0; border: 1px solid #999; overflow: hidden; height: auto !important; height: 1%; padding: 4px 5px 0; }
*:first-child+html ul.holder { padding-bottom: 2px; } * html ul.holder { padding-bottom: 2px; } /* ie7 and below */
ul.holder li { float: left; list-style-type: none; margin: 0 5px 4px 0; }
ul.holder li.bit-box, ul.holder li.bit-input input { font: 11px "Lucida Grande", "Verdana"; }
ul.holder li.bit-box { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #CAD8F3; background: #DEE7F8; padding: 1px 5px 2px; }
ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
ul.holder li.bit-input input { width: 150px; margin: 0; border: none; outline: 0; padding: 3px 0 2px; } /* no left/right padding here please */
ul.holder li.bit-input input.smallinput { width: 20px; }

/* Facebook demo CSS */      
form, #add { border: 1px solid #999; width: 550px; margin: 50px; padding: 20px 30px 10px; }
form ol li { list-style-type: none; }
form ol { font: 11px "Lucida Grande", "Verdana"; margin: 0; padding: 0; }
form ol li.input-text { margin-bottom: 10px; list-style-type: none; padding-bottom: 10px; }
form ol li.input-text label { font-weight: bold; cursor: pointer; display: block; font-size: 13px; margin-bottom: 10px; }
form ol li.input-text input { width: 500px; padding: 5px 5px 6px; font: 11px "Lucida Grande", "Verdana"; border: 1px solid #999; }
form ul.holder { width: 500px; }
form ul { margin: 0 !important }
#facebook-list ul.holder li.bit-box, #apple-list ul.holder li.bit-box, #facebook-list1 ul.holder li.bit-box { padding-right: 15px; position: relative; }
#apple-list ul.holder li.bit-input { margin: 0; }
#apple-list ul.holder li.bit-input input.smallinput { width: 5px; }
ul.holder li.bit-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
ul.holder li.bit-box...

JavaScript

jQuery.facebooklist = function(elem, list, complete, ajax, height, filter, newel){
    var shiftKeyPressed = false,controlKeyPressed=false;
    var addHiddenInput = function(value){
        var input = document.createElement('input');
        $(input).attr({
            'type': 'hidden',
            'name': (elem.attr('id') + '[]'),
            'id': (elem.attr('id') + '[]'),
            'value': value
        });
        return input;
    }
    
    var getChar = function(e){
        if (window.event) {
            keynum = e.keyCode;
        }
        else 
            if (e.which) {
                keynum = e.which;
            }
        if (keynum == 8) 
            return '';
        
        return String.fromCharCode(keynum);
    }
    
    var addItem = function(item, preadded){
        if(item.length > 1)
        {

            for (var i=0;i<item.length;i++)
            {
                 var title = $(item[i]).text();
				 console.log('Item = ' + title);
                var value = ($(item[i]).attr('rel') && $(item[i]).attr('rel') != -1 ? $(item[i]).attr('rel') : title);
                var li = document.createElement('li');
                var txt = document.createTextNode(title);
                var aclose = document.createElement('a');
                var input = addHiddenInput(value);
                $(li).attr({
                    'class': 'bit-box'
                });
                $(li).prepend(txt);
                $(aclose).attr({
                    'class': 'closebutton',
                    'href': '#'
                });
                li.appendChild(aclose);
                li.appendChild(input);
                holder.appendChild(li);
                $(aclose).click(function(){
                    $(this).parent('li').fadeOut('fast', function(){
                        $(this).remove();
                    });
                    return false;
                });
                 item[i].remove();
            }
        }
       ...