JSFiddle - React, Tailwind, and code Playground

by gmdavis62

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css">
<div class="list" style="display:block">
  <ul id="ui-id-77" class="ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" tabindex="0" aria-activedescendant="ui-id-108">
      <li class="set ui-menu-item" role="presentation"><a href="#" aria-haspopup="true" id="ui-id-78" class="ui-corner-all" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-triangle-1-s"></span><span class="t"> </span></a>
      <ul class="ui-menu ui-widget ui-widget-content ui-corner-all ui-menu-icons" role="menu" aria-expanded="false" id="ui-id-120" tabindex="0" style="display: none; top: 208px; left: 24px;" aria-activedescendant="ui-id-108" aria-hidden="true">
        <li class="ui-menu-item" role="presentation"><a href="#" id="ui-id-79" class="ui-corner-all" tabindex="-1" role="menuitem">Date</a></li>
        <li class="wk ui-menu-item" role="presentation"><a href="#" aria-haspopup="true" id="ui-id-80" class="ui-corner-all" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-triangle-1-s"></span>First</a><ul class="ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" aria-expanded="false" id="ui-id-121" tabindex="0" style="display: none; top: 56px; left: 2px;" aria-hidden="true"><li class="ui-menu-item" role="presentation"><a href="#" id="ui-id-85" class="ui-corner-all" tabindex="-1" role="menuitem">Monday</a></li><li class="ui-menu-item" role="presentation"><a href="#" id="ui-id-86" class="ui-corner-all" tabindex="-1" role="menuitem">Tuesday</a></li><li class="ui-menu-item" role="presentation"><a href="#" id="ui-id-87" class="ui-corner-all" tabindex="-1" role="menuitem">Wednesday</a></li><li class="ui-menu-item" role="presentation"><a href="#" id="ui-id-88" class="ui-corner-all" tabindex="-1" role="menuitem">Thursday</a></li><li class="ui-menu-item"...

CSS

body{font-size:13px; font-family: Helvetica, Arial, sans-serif;}
  .list{display:inline-block; margin:1em;}
  label{display:block; margin-bottom:4px;}
  .list ul, .menu ul, ul{display:inline-block;}
  .list div.s{display:inline-block; padding:0 4px;}
.ui-menu-icons .ui-menu-item a{padding:0 2em 0 0;}
  .list div.s span{display:inline-block;}

JavaScript

$( ".list ul" ).menu({ position: { my: "right top", at: "left top" }, icons: { submenu: "ui-icon-triangle-1-e" } });

	$(".list").click(function(){
		var selected = ($(event.target).text());
		var results = $(event.target).closest("div.list").find('.s');
		results.append('<span>' + selected + '</span>');
		//add button class to list items
		$(".s span").button({ icons: { primary: "ui-icon-close" } });
	});
	
	//remove items from list
	$(".s").click(function(){
		$(event.target).parent('span').remove(); //if parent is span
		$(event.target).remove('span'); //if selected is span
	});