JSFiddle - React, Tailwind, and code Playground

by gmdavis62

HTML

<label for="devices">Devices:</label>
<ul id="devices"></ul>
<div class="container">
    <div id="add" class="icon-text"><span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>Add...</div>
    <div id="remove" class="icon-text"><span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>Remove All</div>
    <ul id="menu">
        <li><a id="cancel" href="#">Cancel</a>
        </li>
        <li><a id="sel" class="ui-state-disabled" href="#">Add all (<span id="results">0</span>)</a>
        </li>
        <li>
            <label style="display:none">Search</label>
            <input id="autocomplete" />
        </li>
    </ul>
</div>

CSS

body {
    font-size:13px;
    font-family: Helvetica, Arial, sans-serif;
}
ul.ui-autocomplete {
    max-height:12em;
    overflow:auto;
    padding-right:-2em;
}
ul.ui-autocomplete li a {
    text-wrap:none;
}
ul#menu {
    display:none;
    position:absolute;
    left:2em;
}
label, ul#devices {
    display:block;
}
ul#devices {
    min-height:8em;
    width:30em;
    overflow:auto;
    border:1px solid #eee;
    padding:4px;
    margin:0;
}
.ui-state-default {
    font-weight:normal;
}
.icon-text {
    color:#0073ea;
    vertical-align:middle;
    display:inline-block;
}
.icon-text:hover {
    color:#0099fb;
}
.icon-text:active {
    color:#ff0084;
}
.icon-text span.ui-icon {
    display: inline-block;
    position:relative;
    top:2px;
}
.container {
    position:relative;
    width:30em;
}
#remove {
    float: right;
}

JavaScript

$(document).ready(function(){

var source = ["Mario", "Luigi", "Princess Peach", "Yoshi", "Toad", "Donkey Kong", "Baby Luma", "Birdo", "Pauline", "Princess Daisy", "Professor E. Gadd", "Rosalina", "Toadette", "Toadsworth", "Bowser", "Bowser Jr.", "Boom Boom", "Pom Pom", "Fawful", "Kamek", "Kammy Koopa", "King Boo", "Koopa Kid", "Koopalings", "Petey Piranha", "Tatanga", "Waluigi", "Wario", "Wart"];

var firstVal = source[0];

$("input#autocomplete").autocomplete({
    minLength: 0,
    source: source,
}).focus(function () {
    $(this).autocomplete("search", "");
}).on("autocompleteopen", function (event, ui) {
    var n = $("ul.ui-autocomplete li").size();
    $("span#results").text(n);
    $("#sel").removeClass("ui-state-disabled");
}).on("autocompleteclose", function (event, ui) {
    $("span#results").text("0");
    $("#sel").addClass("ui-state-disabled");
});

//add to devices list if a menu item clicked
$("ul.ui-autocomplete")
    .click(function () {
    //    var selected = ($(event.target).text());
    var selected = ('<li>' + $(event.target).text() + '</li>');
    $("#devices").append(selected);
    $("#devices li").button({
        icons: {
            primary: "ui-icon-close"
        }
    });
    $("#autocomplete").val('');
});

//add to devices list if Select All is clicked
$('#sel').click(function () {
    $("#devices").append($("ul.ui-autocomplete").html());
    $("#menu").css("display", "none");
    $("#devices li").button({
        icons: {
            primary: "ui-icon-close"
        }
    });
});

//remove items from devices list
$("#devices").click(function () {
    $(event.target).parent('li').remove(); //if parent is li
    $(event.target).remove('li'); //if selected is li
});
//add button class to list items?
$("ul#devices li").addClass(".ui-button-text-icons");

//open add menu from the menu
$("#add").click(function () {
    $("#menu").css("display", "inline-block");
    $("autocomplete").autocomplete({
        create: function (event, ui)...