JSFiddle - React, Tailwind, and code Playground

by Vinay Pratap Singh Bhadauria

HTML

<a id="small" href="#">small</a>
<a href="#">medium</a>
<a href="#">large</a>

<div class="size" data-size="small">small tee</div>
<div class="size" data-size="small medium">small tee</div>
<div class="size" data-size="small medium">small tee</div>
<div class="size" data-size="small">small tee</div>
<div class="size" data-size="medium large">small tee</div>
<div class="size" data-size="medium large">small tee</div>

JavaScript

$("#small").click(function() {
    var selectSize = $(this).text();
    alert(selectSize);
    filter(selectSize)
            e.preventDefault();
});

function filter(e){
$('.tyre').hide()
    .filter('[data-sizes=""]:contains(' + e + ')')
    .show(); // show the filtered elements
}