JSFiddle - React, Tailwind, and code Playground

HTML

<select id="select">
    <option value="All" selected="selected">- Any -</option>
    <option value="16">Africa</option>
    <option value="17">Asia</option>
    <option value="56">-China</option>
    <option value="57">-Japan</option>
    <option value="19">Canada</option>
    <option value="20">-Alberta</option>
    <option value="21">-British Columbia</option>
    <option value="22">-Manitoba</option>
    <option value="23">-New Brunswick</option>
    <option value="24">-Newfoundland &amp; Labrador</option>
    <option value="25">-Northwest Territories</option>
    <option value="26">-Nova Scotia</option>
    <option value="27">-Nunavut</option>
    <option value="28">-Ontario</option>
    <option value="29">-Prince Edward Island</option>
    <option value="30">-Quebec</option>
    <option value="31">-Saskatchewan</option>
    <option value="32">-Yukon</option>
    <option value="33">Central &amp; South America</option>
    <option value="34">Europe</option>
    <option value="35">Republic of Ireland</option>
    <option value="36">United Arab Emirates</option>
    <option value="37">United Kingdom</option>
    <option value="38">-England</option>
    <option value="39">-Northern Ireland</option>
    <option value="40">-Scotland</option>
    <option value="41">-Wales</option>
</select>

JavaScript

$(function(){
    var continent='';
    
    $('#select option:gt(0)').each(function(){
      var value = $(this).val();
       
      if($(this).text().indexOf("-")==-1 && continent!=value)
      {
        continent=value;
          $('#select').after('<select id="'+continent+'" style="display:none" class="country"></select>');
      }
      else{
          $('#'+continent).append($(this));
        }  
    });
    $('.country').filter(function(){
        return $(this).children().length ==0;
    }).remove();
    $('#select').change(function(){
       $('.country').hide();
       $('#'+$(this).val()).show();
    });
});