JSFiddle - React, Tailwind, and code Playground
HTML
<div id="countriesMore" class="tboxContent" style="display: block;">
<h1 class="NoLeftMargin">Select which countries you are travelling to</h1>
<fieldset>
<legend>Select which countries you are travelling to</legend>
<div id="countrySearchInputWrap">
<input type="text" id="allCountryLiveSearch" class="form-control" placeholder="Search for a country">
<a href="#" class="ClearSearch"></a>
</div>
<div id="allCountriesWrap">
<div id="allCountriesListWrap" style="height: 2484px;">
<div id="allCountriesList">
<label data-country-code="1000">Abu Dhabi<span></span></label>
<label data-country-code="1001">Afghanistan<span></span></label>
<label data-country-code="1002">Alaska<span></span></label>
<label data-country-code="1003">Albania<span></span></label>
<label data-country-code="1004">Algeria<span></span></label>
<label data-country-code="1005">Andorra<span></span></label>
<label data-country-code="1006">Angola<span></span></label>
<label data-country-code="1007">Anguilla<span></span></label>
<label data-country-code="1008">Antarctic<span></span></label>
<label data-country-code="1009">Antigua<span></span></label>
<label data-country-code="1010">Argentina<span></span></label>
...
JavaScript
$('#allCountryLiveSearch').on('keyup', function() {
var query = this.value;
$('#allCountriesList label').each(function(i, elem) {
if (elem.value.indexOf(query) != -1) {
elem.style.display = 'block';
}else{
elem.style.display = 'none';
}
});
});