JSFiddle - React, Tailwind, and code Playground

HTML

<p>
      <label>Start Period</label>
      <select onchange="reloadRoomPreference();" id = "edit_req_start" name="">
        <option value="0">09:00 - 09:50</option>
        <option value="1">10:00 - 10:50</option>
        <option value="2">11:00 - 11:50</option>
        <option value="3">12:00 - 12:50</option>
        <option value="4">10:00 - 13:50</option>
        <option value="5">14:00 - 14:50</option>
        <option value="6">15:00 - 15:50</option>
        <option value="7">16:00 - 16:50</option>
        <option value="8">17:00 - 17:50</option>
      </select>
    </p>
    <p>
      <label>Length</label>
      <select onchange="reloadRoomPreference();" id = "edit_req_length" name="">
      </select>
    </p>

JavaScript

var optionsValue = [1, 2, 3, 4, 5, 6, 7]
for (var i = 0; i < optionsValue.length ; i++)
    $('#edit_req_length').append('<option>' + optionsValue[i] + '</option>');
$('#edit_req_start').on('change', function(data) {
    var options = $(this).children('option');
    $('#edit_req_length').empty();
    for (var i = 0; i < optionsValue.length - $(this).val() ; i++)
        if (i >= optionsValue.length)
            $('#edit_req_length').append('<option>' + optionsValue[optionsValue.length - 1] + '</option>');
        else
            $('#edit_req_length').append('<option>' + optionsValue[i] + '</option>');
});