JSFiddle - React, Tailwind, and code Playground

HTML

<li>
  <label class="label">Age</label>
  <select id="age1">
    <option value="18">18</option><option value="19">19</option>
    <option value="20">20</option><option value="21">21</option>
    <option value="22">22</option><option value="23">23</option>
    <option value="24">24</option><option value="25">25</option>
    <option value="26">26</option><option value="27">27</option>
    <option value="28">28</option><option value="29">29</option>
    <option value="30">30</option>
  </select>
  <label class="label">To</label>
  <select id="age2">
    <option value="18">18</option><option value="19">19</option>
    <option value="20">20</option><option value="21">21</option>
    <option value="22">22</option><option value="23">23</option>
    <option value="24">24</option><option value="25">25</option>
    <option value="26">26</option><option value="27">27</option>
    <option value="28">28</option><option value="29">29</option>
    <option value="30">30</option>
  </select>
</li>

JavaScript

$("#age1").on("change", function() {

  /* get the value of age1 */
	var val = $(this).val();
  
  /* get all the ages after the selected one
     and add them to the selected age */
  var $selected = $(this).find("option:selected");
  var $available = $selected.add( $selected.nextAll() ).clone();
  
  /* save the selected value of age2 */
  var selected2 = $("#age2").find("option:selected").val();
  
  /* append the html from age1 selection to the
    age2 list, and try to keep the old selection value */
  $("#age2")
    .html( $available )
    .find("option[value='" + selected2 + "']")
    .prop("selected", true);

});