JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<ol id="alphabet">
  <li><a class="letter" href="#">A</a></li>
  <li><a class="letter" href="#">B</a></li>
  <li><a class="letter" href="#">C</a></li>
  <li><a class="letter" href="#">D</a></li>
</ol>
<br/>
<ul id="names">
  <li>Australia</li>
  <li>Bulgaria</li>
  <li>Denmark</li>
</ul>

CSS

body
{
    font-family : Arial;
    font-size : 10pt;
    padding : 10px;
}

JavaScript

$(document).ready(function(){
   $("#names li").hide();
   $("a.letter").click(function(){
     var letter = $(this).html();
     $("#names li").each(function(){
     var liText = $(this).text();
     if(liText.indexOf(letter) == 0)   
         $(this).show();
     else
        $(this).hide();           
    });      
 });
});