JSFiddle - React, Tailwind, and code Playground
HTML
<select name="start_time">
</select>
<select name="end_time">
<option value="default">Pick a start time</option>
</select>
JavaScript
// Add each option to start_times
for (var hour = 9; hour <= 21; hour++) {
var option = "<option value='"+hour+"'>"+hour+"</option>";
$('[name="start_time"]').append(option);
}
// When the start time is changed, set the end time
$('[name="start_time"]').on('change', function() {
// This is the start time chosen
var start_time = $(this).val();
// Remove the default option
$('[name="end_time"]').find('option').remove();
// Add options after the start time
for (var hour = parseInt(start_time) + 1; hour <= 24; hour++) {
var option = "<option value='"+hour+"'>"+hour+"</option>";
$('[name="end_time"]').append(option);
}
});