JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">THIS</div>
<div class="click" data-hook="one">CLICK</div>
<div class="click" data-hook="two">CLICK</div>
<div class="click" data-hook="three">CLICK</div>
<div class="click" data-hook="four">CLICK</div>
<div class="click" data-hook="five">CLICK</div>
<div id="log"><div>

CSS

.button {
    position: relative;
    margin-bottom: 50px;
}

.click {
    cursor: pointer;
}

JavaScript

$(".button").data("filters",[]);
$(".click").click(function () {
    var thing = $(this).attr("data-hook");
    var filters = $(".button").data("filters");
    if(filters.indexOf(thing) === -1) {
        filters.push(thing);
    }
    $('.button').data('filter', filters.join(","));
    $("#log").html("buttons data-filter: "+$('.button').data("filter"));
});