JSFiddle - React, Tailwind, and code Playground

HTML

<select multiple="multiple" size="5" id="supply_cities_select">
     <option value="1">city1</option>
     <option value="2">city2</option>
     <option value="3">city3</option>
     <option value="4">city4</option>
     <option value="5">city5</option>
     <option value="6">city6</option>
    <option value="7">city7</option>
    <option value="8">city8</option>
    <option value="9">city9</option>
</select>

JavaScript

$(document).ready(function()
{
    $("#supply_cities_select option").click(function()
        {
            var clicked = 0;
            if($(this).attr("selected"))
            {
                clicked = $(this).val();
            }
            if(clicked != 0)
            {
                var a = $("#supply_cities_select :selected").length;
                 end = $("#supply_cities_select :selected").slice(-1).map(function(i) {
                      return this.value;
                  }).get().join('');
                if(a > 5)
                {
                    var v1 = parseInt(clicked);
                    var v2 = parseInt(end);
                    if(v1 < v2)
                    {
                        $("#supply_cities_select option[value='"+v2+"']").attr("selected",false);
                        
                    }
                    if(v1 == v2)
                    {
                        $("#supply_cities_select :selected:lt(1)").attr("selected",false);
                    }
                    
                }
            }
          
        });

})