JSFiddle - React, Tailwind, and code Playground

HTML

<form class="orderform hide">
                        <fieldset name="fs1" class="fs1">
                            <h1 class="fs-title">Book your voyage</h1>
                            
                            <select id="travel_from">
                                <option disabled selected hidden>Where from?</option>
                                <option>Napoli</option>
                                <option>Palermo</option>
                                <option>Cagliari</option>
                                <option>Barcelona</option>
                                <option>Malaga</option>
                                <option>Rio de Janeiro</option>
                            </select>

                            <select id="travel_to" disabled>
                                <option disabled selected hidden>Where to?</option>
                            </select>

                            <hr>


                    </form>

JavaScript

var allCities = ["Napoli", "Palermo", "Cagliari", "Barcelona", "Malaga", "Rio de Janeiro"];

$(document).ready(function(){   
    
	$("#travel_from").on( "change", function( event, ui ) {
        var cities = allCities.slice();

        var selectedCity = $(this).val();

        var index = cities.indexOf(selectedCity);
        for (i = index; i > -1; i--){
            cities.splice(i,1);
        }
        $('#travel_to').find('option').remove();
        $('#travel_to').prop('disabled', false);
        
        $.each(cities, function(val, text) {
               console.log('inside change: ' +cities)
                $("#travel_to").append(
                    $('<option></option>').val(val).html(text)
                );
            });
    } );
});