JSFiddle - React, Tailwind, and code Playground

by blue1086

HTML

<span class="brand">ABrand</span>

<span class="brand">AABrand</span>

<span class="brand">AAAABrand</span>

<span class="brand">AABrand</span>

<span class="brand">DSBrand</span>

<span class="brand">DSSBrand</span>

<span class="brand">DDDBrand</span>

JavaScript

var hidden = false;
$('.brand').click(function () {
    if (!hidden) {
        var letter = $(this).text().trim().split('')[0];
        $('.brand').each(function () {
            if ($(this).text().trim().split('')[0] != letter) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
        $(this).show();
        hidden = !hidden;
    } else {
        $('.brand').show();
        hidden = !hidden;
    }
});