(Duda) Agregar clase css a un único elemento

[opzina]

Tengo una lista desordenada con 8 elementos li:

Código HTML:

<ul>
              <li class="list"><a class="letter" href="#">A</a>
              <li class="list"><a class="letter" href="#">B</a>
              <li class="list"><a class="letter" href="#">C</a>
              <li class="list"><a class="letter" href="#">D</a>
               <li class="list"><a class="letter" href="#">A</a>
              <li class="list"><a class="letter" href="#">B</a>
              <li class="list"><a class="letter" href="#">C</a>
              <li class="list"><a class="letter" href="#">D</a>
          </ul>
 

Lo que necesito es:

Necesito agregar una clase .active en forma individual y que el resto de los elementos no queden activos.

Código Javascript:

<script type="text/javascript">
 
    $(document).ready(function() {
 
        $('.letter').click(function(event) {
            $(this).parent().addClass('active');
        });
    });
 
</script>