JSFiddle - React, Tailwind, and code Playground

HTML

<p>You may select multiple countries as we have a multiple select box. The selected countries appear below the select box as a list. Click on any item on the list to remove your selection.</p>

<select multiple="" id="countries-new" class="form-control">
    <option value="US">United States (5)</option>
    <option value="LS">Lesotho (0)</option>
    <option value="AX">Aland Islands (0)</option>
    <option value="AL">Albania (0)</option>
    <option value="DZ">Algeria (0)</option>
</select>

<div id="flagBtn"></div>

CSS

a { display: block; padding:10px 0}

JavaScript

var selectCountryChanged = function(ruleId) {
    var selectVals = [];
    var html="";
    var select = $("select#countries-"+ruleId);
    select.find(':selected').each(function(i, selected) {
        selectVals.push( $(this).val() +"|" +  $(this).text());
    });
    for (i=0, j=selectVals.length; i<j; i++) {
        var sv = selectVals[i].split("|");
        html += '<a href="#" class="'+ sv[0] +'" title="'+ sv[1] +'">'+sv[1]+'</a>';
    }
    $('#flagBtn').empty().append(html);
};

var deselectCoountry = function(ruleId, val) {
    var select = $("select#countries-"+ruleId);
    select.find('option[value="' + val + '"]').prop('selected', false);
};

var ruleID = 'new';
$(document)
.on('change', '#countries-new', function(){
    selectCountryChanged(ruleID);
})
.on('click', '#flagBtn > a', function(){
    deselectCoountry(ruleID, this.className);
    $(this).remove();
});