[JavaScript] nastavljanje CSS stila v določenem elementu HTML seznama

Pozdravljeni,

Zanima me, na kakšne način bi lahko v nekem html seznamu ob kliku na določen element samo temu elementu spremenil CSS stil.
Primer:

<li><a onClick="javascript:foo(1, 2);">&#9679;</a></li>
<li><a onClick="javascript:foo(3, 4);">&#9679;</a></li>
<li><a onClick="javascript:foo(5, 6);">&#9679;</a></li>
<li><a onClick="javascript:foo(7, 8);">&#9679;</a></li>

Kako lahko bolj preprosto rešim stvar, da ne bi dal vsakemu elementu seznama svoj unikaten ID in potem v funkciji foo preverjal, če so argumenti npr. 3 in 4 potem dodam elementu z ID-jem nov stil?

Aja, pozabil sem dodat to, da ko kliknemo na drugi element morajo biti drugi na default nastavitev. Recimo da so default sive barve, ob kliku pa rata zelen ampak ko kliknemo na drugi element rata prejšnji nazaj siv.

Vse to vem ampak mi ni uspelo priti do konkretne kode. Mogoče sem googlal z napačnimi ključnimi besedami... Zato pa vprašam tukaj, če lahko kdo pomaga s kakšno vrstico kode.

Z jQuery knjiznico je simple...

<li><a>&#9679;</a></li>
<li><a>&#9679;</a></li>
<li><a>&#9679;</a></li>
<li><a>&#9679;</a></li>
<li><a>&#9679;</a></li>

li a {
  
  color:#ff0000;
  
}

a.on {
  
   color:#00ff00;
  
}

$( document ).ready(function() {
 $('li a').on('click', function(e){
    $('li a').removeClass('on');
    $(this).addClass('on');

  });
});