JSFiddle - React, Tailwind, and code Playground

HTML

<body onload = "ChangeColor_1();">
	<nav>
		<a href = "#" id = "first" class = "symbols" onClick = "ChangeColor_1();">A </a>
		<a href = "#" id = "second" class = "symbols" onClick = "ChangeColor_2();">B </a>
		<a href = "#" id = "third" class = "symbols" onClick = "ChangeColor_3();">C </a>
		<a href = "#" id = "fourth" class = "symbols" onClick = "ChangeColor_4();">D </a>
		<a href = "#" id = "fifth" class = "symbols" onClick = "ChangeColor_5();">E</a>
	</nav>
</body>

CSS

a {
			text-decoration: none;
			color: grey;
			font-size: 40px;
		}
		
		a:visited {
			color: grey;
		}

JavaScript

var items = document.getElementsByClassName("symbols");
		
function ChangeColor_1() {
	for (i=0; i<items.length; i++) {
		items[i].style.color = "grey";
		items[0].style.color = "red";
		}
	}
		
function ChangeColor_2() {
	for (i=0; i<items.length; i++) {
		items[i].style.color = "grey";
		items[1].style.color = "red";				
		}
	}

function ChangeColor_3() {
	for (i=0; i<items.length; i++) {
		items[i].style.color = "grey";	
		items[2].style.color = "red";				
		}
	}

function ChangeColor_4() {
	for (i=0; i<items.length; i++) {
		items[i].style.color = "grey";	
		items[3].style.color = "red";				
		}
	}

function ChangeColor_5() {
	for (i=0; i<items.length; i++) {
		items[i].style.color = "grey";	
		items[4].style.color = "red";				
		}
	}