JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="chosenflag" data-flag="de"><img class="flag" src="" alt="" /></a>

<ul class="choices">
    <li><a href="#" data-flag="en">en<img class="flag" src="/img/flag/United Kingdom.png" alt="" /></a></li>
    <li><a href="#" data-flag="de">de<img class="flag" src="/img/flag/Germany.png" alt="" /></a></li>
    <li><a href="#" data-flag="es">es<img class="flag" src="/img/flag/Spain.png" alt="" /></a></li>
    <li><a href="#" data-flag="fr">fr<img class="flag" src="/img/flag/France.png" alt="" /></a></li>
    <li><a href="#" data-flag="it">it<img class="flag" src="/img/flag/Italy.png" alt="" /></a></li>
</ul>

JavaScript

$(".choices li a").click(function(e){
    var compareflag = $(".chosenflag").data("flag");
    if ($(this).data("flag") != compareflag) {
        e.preventDefault();
        alert("clicked");
    }
});