JSFiddle - React, Tailwind, and code Playground

HTML

<dl id="sample-1" class="dropdown">
    <dt id="1"><a href="#" id="1"><span>Please select the country</span></a></dt>
    <dd>
        <ul>
            <li><a>Brazil<span class="value">BR</span></a></li>
            <li><a href='#'>France<span class="value">FR</span></a></li>
            <li><a href='#'>Germany<span class="value">DE</span></a></li>
            <li><a href='#'>India<span class="value">IN</span></a></li>
            <li><a href='#'>Japan<span class="value">JP</span></a></li>
            <li><a href='#'>Serbia<span class="value">CS</span></a></li>
            <li><a href='#'>United Kingdom<span class="value">UK</span></a></li>
            <li><a href='#'>United States<span class="value">US</span></a></li>
        </ul>
    </dd>
</dl>
<span id="result-1"></span>

CSS

dl.dropdown dd ul{
    display: none;   
}

dl.dropdown dd ul li{
    padding: 5px 3px;  
}
dl.dropdown dd ul li a{
    text-decoration: none;
}
dl.dropdown dd ul li:hover{
    background-color: #55f2f2;   
    
}

JavaScript

$('dl.dropdown dt a').click(function(e) {
    e.preventDefault();
    $(this).parent().parent().find('dd ul').toggle();
});


$('dl.dropdown dd a').click(function(e) {
    var val = $(this).text();
    alert('you chose ' + val);
    $(this).closest('ul').toggle();
});