JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<div class="filter-wrap">
    <p><strong>Alphabetical:</strong></p>
    <form>
        <label><input type="radio" name="fl-alpha" value="all" id="all" />ALL</label><br>
        <label><input type="radio" name="fl-alpha" value="a" id="a" />A</label><br>
        <label><input type="radio" name="fl-alpha" value="b" id="b" />B</label><br> 
        <label><input type="radio" name="fl-alpha" value="c" id="c" />C</label><br>                     
        <label><input type="radio" name="fl-alpha" value="d" id="d" />D</label><br>
        <label><input type="radio" name="fl-alpha" value="e" id="e" />E</label><br>  
        <label><input type="radio" name="fl-alpha" value="f" id="f" />F</label>
    </form>
    <p><strong>Categories:</strong></p>
    <form>
        <label><input type="checkbox" name="fl-cat" value="academic" id="academic" />Academic</label><br>
        <label><input type="checkbox" name="fl-cat" value="campus" id="campus" />Campus</label><br>
        <label><input type="checkbox" name="fl-cat" value="people" id="people" />People</label><br>                  
        <label><input type="checkbox" name="fl-cat" value="buildings" id="buildings" />Buildings</label><br>
        <label><input type="checkbox" name="fl-cat" value="about" id="about" />About</label>
    </form>
</div>
<div class="continents-wrap">
    <h3>Subcategories</h3>
    <div class="continents">
        <label><input type="checkbox" name="fl-cont" value="africa" id="africa" />Africa</label><br>
        <label><input type="checkbox" name="fl-cont" value="europe" id="europe" />Europe</label><br>
        <label><input type="checkbox" name="fl-cont" value="asia" id="asia" />Asia</label><br>
        <label><input type="checkbox" name="fl-cont" value="north-america" id="north-america" />North America</label><br>
        <label><input type="checkbox" name="fl-cont" value="south-america" id="south-america" />South America</label><br>
        <label><input type="checkbox" name="fl-cont"...

CSS

body {
    font-family: 'Arial';
    color: #646464;
}
.filter-wrap {
    float: left;
    width: 20%;
    margin: 0 5% 0 0;
    padding: 0;
    position: relative;
}
.continents-wrap {
    float: left;
    width: 20%;
    margin: 0 5% 0 0;
    padding: 0;
}
.results {
    float: left;
    width: 50%;
}
.results div {
    float: left;
    width: 90%;
    height: 68px;
    line-height: 68px;
    padding: 0 5%;
    background: #eee;
    margin: 0 0 1px;
    position: relative;
}

JavaScript

var byAlpha = [],
    byCat = [],
    byLocation = [];

$("input[name=fl-alpha]").on("change", function () {
    if (this.checked) byAlpha.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byAlpha, "[data-category~='" + $(this).attr("value") + "']");
});

$("input[name=fl-cat]").on("change", function () {
    if (this.checked) byCat.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byCat, "[data-category~='" + $(this).attr("value") + "']");
});

$("input[name=fl-cont]").on("change", function () {
    if (this.checked) byLocation.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byLocation, "[data-category~='" + $(this).attr("value") + "']");
});

$("input").on("change", function () {
    var str = "Include items \n";
    var selector = '',
        cselector = '',
        nselector = '';

    var $lis = $('.results > div'),
        $checked = $('input:checked');

    if ($checked.length) {

        if (byAlpha.length) {
            if (str == "Include items \n") {
                str += "    " + "with (" + byAlpha.join(',') + ")\n";
                $($('input[name=fl-alpha]:checked')).each(function (index, byAlpha) {
                    if (selector === '') {
                        selector += "[data-category~='" + byAlpha.id + "']";
                    } else {
                        selector += ",[data-category~='" + byAlpha.id + "']";
                    }
                });
            } else {
                str += "    AND " + "with (" + byAlpha.join(' OR ') + ")\n";
                $($('input[name=fl-alpha]:checked')).each(function (index, byAlpha) {
                    selector += "[data-category~='" + byAlpha.id + "']";
                });
            }
        }

        if (byCat.length) {
            if (str == "Include items \n") {
                str += "    " + "with (" + byCat.join(' OR ') + ")\n";
                $($('input[name=fl-cat]:checked')).each(function (index,...