JSFiddle - React, Tailwind, and code Playground
HTML
<select id="update_supp_last_countries">
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Algeria">Algeria</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antartica">Antarctica</option>
<option value="Andorra">Andorra</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
</select>
<button id="apply">apply filter</button>
JavaScript
jQuery.fn.uniqueAttrs = function(attr) {
if(!attr) return this;
var that = this;
return this.filter(function (index, node) {
return that.index(that.filter(function() {
return this[attr] === node[attr];
})) === index;
});
};
$("#apply").on('click', function() {
var $ul = $('#update_supp_last_countries');
$ul.html($ul.find('option').uniqueAttrs('value'));
});