JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="test" data-hook="one">One</div>
<div class="test" data-hook="two">Two</div>
<div class="test" data-hook="three">Three</div>
<div class="test" data-hook="four">Four</div>
<div class="test" data-hook="five">Five</div>
<div class="here"></div>

CSS

.test {
    position: relative;
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
}
.here {
    position: relative;
    margin-top: 50px;
}

JavaScript

$(document).ready(function () {
    var cfilter = [];

    $(".test").click(function () {

        var thing = $(this).attr("data-hook");
        var test = "." + thing + ", ";

        if ($.inArray(test, cfilter) === -1) {
            cfilter.push(test);
        }

        $(".here").html(cfilter);

    });

});