Включить текстовое поле при выборе опции

Question

Следующий код позволяет вам:
1. Выберите город, из которого вы хотите отправиться в путешествие. Выбор города включает следующий элемент управления.
2. Выберите город, в который вы хотите отправиться. Выбор города позволяет следующий контроль
3. Выберите дату, которую вы хотите оставить.

Код работает хорошо, за исключением случая, когда вы выбираете город в списке travel_to, который идет сразу после города, который вы выбрали в списке travel_from. Я не могу понять, почему. То есть: если вы выберете "Неаполь" в travel_from -controller и "Палермо" в travel_to-controller, travel_from_date не будет включен.

  //Holds the names of all the cities
 var allCities = ["Naples", "Palermo", "Cagliari", "Barcelona", "Malaga", "Rio de Janeiro"];
 $(document).ready(function() {
   $("#travel_from, #travel_to").selectmenu();
   //Disables the travel_from_date-input field   
   $("#travel_from_date").prop("disabled", true);
   $("#travel_to").selectmenu("disable");

   $("#travel_from").on("selectmenuchange", 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").selectmenu('destroy');
     $("#travel_to").selectmenu();
     $("#travel_to option").remove();
     $("#travel_to").append($('<option selected disabled></option').html("Where to?"));
     $.each(cities, function(val, text) {
       $("#travel_to").append(
         $('<option></option>').val(text).html(text)
       );
     });
     $("#travel_to option:selected").removeAttr("selected");
     $("#travel_to").selectmenu("enable");
   });

   $("#travel_to").on("selectmenuchange", function(event, ui) {
     $("#travel_from_date").prop("disabled", false);
   });
 });

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/hot-sneaks/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form class="orderform">
  <fieldset>
    <h1>Book your voayage</h1>
    <select id="travel_from">
      <option disabled selected hidden>Where from?</option>
      <option>Naples</option>
      <option>Palermo</option>
      <option>Cagliari</option>
      <option>Barcelona</option>
      <option>Malaga</option>
      <option disabled>Rio de Janeiro</option>
    </select>

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

    <hr>

    <input id="travel_from_date" title="When do you want to leave?" type="text" name="travel_from_date" placeholder="Outbound" />
  </fieldset>
</form>