unable to click span #id in div without page refresh

Question

I have the below HTML structure

<div style="position:relative; width:500px; top:50px; letter-spacing:3px; width:650px; margin:auto; font-size:16px;">
<span id ='Alist' style='cursor:pointer;'>A</span>
<span id ='Blist' style='cursor:pointer;'>B</span>
<span id='Clist' style='cursor:pointer;'>C</span>
<span id='Dlist' style='cursor:pointer;'>D</span>
<span id='Elist' style='cursor:pointer;'>E</span>
..
..
..
</div>

clicking on the respective alphabet would bring out a list of names.

Javascript code below

$(document).ready(function() {
$('#Alist').on('click', function() {$('#A').show();});
$('#Blist').on('click', function() {$('#B').show();});
$('#Clist').click(function() {$('#C').show();});
$('#Dlist').click(function() {$('#D').show();});
$('#Elist').click(function() {$('#E').show();});
});

I tried

.on / .click as you can see on #Alist and #Blist

When I click "A" none of the other alphabets are clickable. If I have to refresh the page to click the next alphabet.

What is wrong here? Pls let me know if you require anything is not clear.

Answer 1

Elements #A, #B , etc. are floated or positioned. Because of higher z-index they are above links and links aren't clickable.