JSFiddle - React, Tailwind, and code Playground

HTML

<div id='selectors'><span>A-F</span><span>G-L</span><span>M-S</span><span>T-Z</span></div>

<a hreh=#>Astring</a>
<a hreh=#>Cstring</a>
<a hreh=#>Xstring</a>
<a hreh=#>Dstring</a>
<a hreh=#>Zstring</a>

CSS

span{
    cursor: pointer;
}
.selected{
    color: blue;
}

JavaScript

$('div#selectors span').click(function(){
        expression = "/^["+$(this).html()+"].*$/";
        
        rx = RegExp(expression,'i');
        console.log(rx,'expression');
        $("a").each(function(){
                    
                    if($(this).html().match(rx) !== null){
                        $(this).addClass('selected');
                    } 
        });
        
    })