How to bold label on click?
===

So the labels are populated from the database. Once the label is clicked, the label need to turn red and bold. when clicked on another label, the first label need to come back to original state and the new label should be activated and it needs to be bold and red. for some reason, the changeActiveStates() only works for the first 2 labels, i.e., when first label is clicked it turns red and when the second label is clicked the first label is turned black and the second label is turned red. when the third label is clicked, the second label remains red and the third one turns red. How do i fix this?? 

Here is the code:

    <html>
    <span>
    <input type="hidden" name="LiabFilter" id= "idLib<%=liabkey %>" value="<%=liabkey %>" />
    <div>
    <label for="idLib<%=liabkey%>" id="liablabel" style="cursor: hand; padding-left: 25px; font-weight: normal" 
										onClick ="clearLiabFilter();  
										document.getElementById('idLib<%=liabkey%>').checked = true; 
										changeActiveStates(this);">
    <%=liab.getName() %> 
    </br>
    </label>
    </div>
    </span>
    <style type="text/css">
			       .activate { font-weight: bold; color:#e40000;}
			       .visited{ font-weight: normal; color: #000000;}
			      
					
					</style>
    <script>
	function byId(id) { 
		return document.getElementById ? document.getElementById(id) : document.all[id];
	} 
	
	var prevLink = ""; 
	
	function changeActiveStates(ele) { 
		if (prevLink) byId(prevLink).className = '';
		ele.className = 'activate'; 
		prevLink = ele.id; 
		}
    </script>
    </html>
