JSFiddle - React, Tailwind, and code Playground

by homer2

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<button id="showAddFilter">Add filter</button><br>
<div id="filterChoice" style="display:none;" title="Choose new filter">
    <button class="addFilter" data-filter-id="filter1" style="display: none;">Event Date</button>
    <button class="addFilter" data-filter-id="filter2">Watch List</button>
    <button class="addFilter" data-filter-id="filter3">CBA</button>
    <button class="addFilter" data-filter-id="filter4">Bad Tags</button>
    <button class="addFilter" data-filter-id="filter5">Org</button>
    <button class="addFilter" data-filter-id="filter6">Description</button>
</div>
<div id="filters">
    <div id="filter1" class="filter">
        Event Date<br/>
        <select>
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select></div>
    <div id="filter2" class="filter" style="display: none;">
        Watch List <a class="removeFilter" href="#">remove</a><br/>
        <select>
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select></div>
    <div id="filter3" class="filter" style="display: none;">
        CBA <a class="removeFilter" href="#">remove</a><br/>
        <select>
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select></div>
    <div id="filter4" class="filter" style="display: none;">
        Bad Tags <a class="removeFilter" href="#">remove</a><br/>
        <select>
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select></div>
    <div id="filter5" class="filter" style="display: none;">
        Org <a class="removeFilter" href="#">remove</a><br/>
        <select>
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select></div>
    <div id="filter6" class="filter" style="display:...

CSS

.filter{
    margin: 5px; 
    border: thin outset #808080;
    display:inline-block;
}

#filters
{
    border: thin outset #808080;
    background-color:teal;
}

JavaScript

$("#showAddFilter").click(function() {
    $("#filterChoice").dialog("open");
}).button({
    icons: {
        secondary: "ui-icon-plus"
    }
});


$("#filterChoice button").click(function() {
    $("#" + $(this).data("filterId")).show().data("addButton", this);
    $("#filterChoice").dialog("close");
    $(this).hide();
});


$("#filterChoice").dialog({
    autoOpen: false,
    modal: true
});

$(".removeFilter").click(function() {
    $(this).closest(".filter").hide("fast");
    $($(this).closest("div").data("addButton")).show();
    
});