JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <select multiple id="countries" style="width:300px;height:200px">
        <option id="globalc" class="global" value="1" selected>Globales</option>
        <option class="latam" value="2">LATAM</option>
        <option class="segmented" value="3">Argentina</option>
        <option class="segmented" value="4">Brasil</option>
        <option class="segmented" value="5">Bolivia</option>
        <option class="segmented" value="6">Colombia</option>
        <option class="segmented" value="7">Chile</option>
        <option class="segmented" value="8">Ecuador</option>
        <option class="segmented" value="9">España</option>
        <option class="segmented" value="10">México</option>
        <option class="segmented" value="11">Perú</option>
        <option class="segmented" value="12">Puerto Rico</option>
        <option class="segmented" value="13">Republica Dominicana</option>
        <option class="segmented" value="14">Uruguay</option>
      </select>

JavaScript

$(document).ready(function(){

  var GLOBAL_INDEX = "1";
  var LATAM_INDEX = "2";
  var numCountries = 12;

  $("#countries").change(function(){    
    var selectedValue = this.value;

    if(selectedValue === GLOBAL_INDEX){
      deselectAll();
      selectGlobal(true);
    } else if(selectedValue === LATAM_INDEX){
      selectGlobal(false);
      selectAllCountries();
    } else {
      selectGlobal(false); 
      var allCountriesSelected = areAllCountriesSelected();
      selectLatam(allCountriesSelected);     
    }
  });

  function selectGlobal(selected){
    $("#globalc").prop("selected",selected);
  }

  function selectLatam(selected){
    $(".latam").prop("selected",selected);
  }

  function areAllCountriesSelected(){
    var count = 0;
    $.each($("#countries option:selected"), function(){
      count++;
    });
    return count === numCountries;
  }   

  function deselectAll(){
    $.each($("#countries option:selected"), function(){
      $(this).prop("selected", false);
    });
  }

  function selectAllCountries(){
    $.each($("#countries option"), function(){
      if(this.value !== GLOBAL_INDEX){
        $(this).prop("selected", true);
      }
    });
  }

});