JSFiddle - React, Tailwind, and code Playground

HTML

<div id="list" class="color">
          <ul>
            <a href="#">1</a>
             <a href="#">2</a>
             <a href="#">3</a>
            <a href="#">4</a>
             <a href="#">5</a>
          </ul>
        </div>

CSS

.bold
{
    font-weight: bold;
    background:contain;
    text-decoration:none;
}
.color
{
  background:pink;
  background size:25%;
 
  
}
a:hover{
  background-color:white;
}

JavaScript

var lis = document.getElementById("list").getElementsByTagName("a");
if (lis.length > 0)
{
    for(var i = 0; i < lis.length; i++)
    {
        lis[i].addEventListener("click", function()
        {
            clean(lis);
            this.className = "bold";
            
     }, false);
     
    }
    
}

clean = function(p)
{
    for(var i = 0; i < p.length; i++)
    {
        p[i].className = "";
    }
}