JSFiddle - React, Tailwind, and code Playground

by dalesaurus

HTML

<ul class="styled_list">
    <li><a href="#" data-term="fri-9-13">Friday Sep 13</a></li>
    <li><a href="#" data-term="fri-9-6">Friday Sep 6</a></li>
    <li><a href="#" data-term="sat-9-7">Saturday Sep 7</a></li>
</ul>
<ul class="styled_list">
    <li><a href="#" data-term="country">Country</a></li>
    <li><a href="#" data-term="family">Family Show</a></li>
    <li><a href="#" data-term="rock">Rock</a></li>
</ul>
<div class="event_wrap family fri-9-13">Family, Friday 9.13</div>
<div class="event_wrap family fri-9-6">Family, Friday 9.6</div>
<div class="event_wrap country sat-9-7">Country, Saturday 9.7</div>
<div class="event_wrap rock fri-9-13">Rock, Friday 9.13</div>
<div class="event_wrap family fri-9-13">Family, Friday 9.13</div>

CSS

.event_wrap {border: 1px solid #ddd; padding: 10px;margin: 20px}
span.clear-filter {text-decoration:underline;background-color:blue;cursor:pointer;color:white;margin-left:5px}
.current-tax {font-weight:bold}

JavaScript

(function ($) {
    $.fn.sortEmAll = function (options) {
        var settings = $.extend({
            animationDelay: 400,
            baseItemClass: '.event_wrap',
            currentlySelectedClass: 'current-tax',
            baseFilterAttribute: 'term',
            clearHTML: '<span>Clear Selection</span>',
            clearClass: 'clear-filter',
            noEventsToShow: function(e) {
                // Override me
                $(document).trigger('sortEmAll.showAllEvents');
            }
        }, options),
            show_these = [],
            addFilter = function (itmsel) {
                if (show_these.indexOf(itmsel) == -1) show_these.push(itmsel);
            },
            rmFilter = function (itmsel) {
                if (show_these.indexOf(itmsel) !== -1) show_these.splice(show_these.indexOf(itmsel), 1);
            },
            showAll = function () {
                // eh...
                $('.' + settings.clearClass).remove();
                $('.' + settings.currentlySelectedClass).removeClass(settings.currentlySelectedClass);
                show_these = [];
                doFiltering();
            },
            doFiltering = function () {
                if(show_these.length > 0 ) {
                    var showThese = show_these.join(''),
                        allThose = $(settings.baseItemClass);
                    $(allThose).filter(showThese).filter(':hidden').slideDown(settings.animationDelay);
                    $(allThose).not(showThese).filter(':visible').slideUp(settings.animationDelay)
                    .promise().done(function() {
                        if( $(allThose).filter(':visible').length <= 0 ) 
                            $(document).trigger('sortEmAll.noEventsToShow');
                    });
                } else {
                    $(settings.baseItemClass).slideDown();
                }
            },
            clearFilter = function(e) {
                var grp = e.data.groupParent,
         ...