sostituire/cambiare flag al click bootstrap menù

[djjunior]

Salve
ho questo codice (bootstrap) cambio lingua che mi esegue onhover un menù a discesa con le relative bandiere, vorrei che cliccando sulle bandiere in elenco mi cambi la bandiera di default (quella italiana attualmente) con quelle selezionata e così via, come posso fare?

<script>
$(document).ready(function() {
      $('.dropdown').hover(function() {
        $(this).addClass('show');
        $(this).find('.dropdown-menu').addClass('show');
      }, function() {
        $(this).removeClass('show');
        $(this).find('.dropdown-menu').removeClass('show');
      });
});
</script>
<div class="dropdown" > 
        <a class="dropdown-toggle" href="#" changeable="true" data-bs-toggle="dropdown" aria-expanded="false"  onclick="getElementById('langSelector').value='it'"> 
        <i class="flag-icon flag-icon-it" ></i>
        </a>  
            <ul class="dropdown-menu"  > 
            <li><a class="dropdown-item" href="#" onclick="getElementById('langSelector').value='it'"><i class="flag-icon flag-icon-it"></i></a> 
            </li> 
            <li><a class="dropdown-item" href="#" onclick="getElementById('langSelector').value='en'"><i class="flag-icon flag-icon-gb"></i></a> 
            </li> 
            <li><a class="dropdown-item" href="#" onclick="getElementById('langSelector').value='fr'"><i class="flag-icon flag-icon-fr"></i></a> 
            </li> 
            <li><a class="dropdown-item" href="#" onclick="getElementById('langSelector').value='de'"><i class="flag-icon flag-icon-de"></i></a> 
           </li> 
        </ul> 




</div>

Grazie

[djjunior]

nessun aiuto?