(Consulta) Cargar contenido una sla vez y de un solo item

[opzina]

Tengo las letras del abcdario o alfabeto.

Al hacer click en una de ellas, me debe mostrar un listado de palabras.

Cuando sucede el primer evento click funciona adecuadamente.
Ej. click en letra a, muestra 'Asc', 'After', 'Asns'.

Aunque si luego hago click en B, me muestra las letras de A y se agregan las de B. Este comportamiento quiero evitar.

Necesito que al hacer click en A muestra letras de A, Al hacer click en B, muestre las de B.

Como aplico esta restricción?

Código HTML:

<ul class="abc">
                    <li><a rel="0" href="#">A</a></li>
                    <li><a rel="1" href="#">B</a></li>
                    <li><a rel="2" href="#">C</a></li>
</ul>
 

Código Javascript:

<script type="text/javascript">
    $(document).ready(function() {
        
        var words = [
                a = ['Asc', 'After', 'Asns'],
                b = ['Basic'],
                c = ['Calc', 'Composite']
            ];    
        
        var destino = $('#words ul');
        var lista = $('.abc li');
        
        lista.click(function(event) {    
            event.preventDefault();
            
            //Add and remove "active" css class.
            $(this).addClass('active').siblings().removeClass('active');
            
            // Get rel atribute value.
            var abc = $(this).children().attr('rel');
            
            $(this).each(function() {
                for(var i = 0; i < words.length; i++) {
                    if(abc == i) {
                        for(var word = 0; word < words[i].length; word++) {
                            destino.append('<li><a href="#">' + words[i][word] + '</a></li>');
                        }
                    }
                }
 
            });
        });
 
    });
</script>