JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class="margin-bottom10">Your opening hours</h3>

<table>
    <tbody>
        <tr class="opening-hours-mon-fri display_none">
            <td>Monday</td>
            <td>
                <select id="postad-monFrom" name="openhrs_mon_from">
                    <option>Please select</option>
                    <option value="closed">Closed</option>
                    <option value="0:00am">0:00am</option>
                    <option value="0:30am">0:30am</option>
                    <option value="1:00am">1:00am</option>
                </select>
                <!--<label for="postad-monTo">to</label>-->to
                <select id="postad-monTo" name="attributeMap[appliance_phone_repair.openhrs_mon_to_s]">
                    <option></option>
                    <option value="-">-</option>
                    <option value="0:00am">0:00am</option>
                    <option value="0:30am">0:30am</option>
                    <option value="1:00am">1:00am</option>
                </select>
            </td>
        </tr>
        <tr class="opening-hours-mon-fri">
            <td>
                <label for="postad-tuesFrom">Tuesday</label>
            </td>
            <td>
                <select id="postad-tuesFrom" name="attributeMap[appliance_phone_repair.openhrs_tues_from_s]">
                    <option>Select time</option>
                    <option value="closed">Closed</option>
                    <option value="0:00am">0:00am</option>
                    <option value="0:30am">0:30am</option>
                    <option value="1:00am">1:00am</option>
                </select>

                <label for="postad-tuesTo">to</label>

                <select id="postad-tuesTo" name="attributeMap[appliance_phone_repair.openhrs_tues_to_s]">
                    <option></option>
                    <option value="-">-</option>
                    <option value="0:00am">0:00am</option>
                    <option value="0:30am">0:30am</option>
         ...

JavaScript

// TEST SELECTORS BY CHANGING BKGROUND COLOR
//$('[class^="opening-hours-"]').css("background-color", "red");
$('[class^="opening-hours-"]').find('select[id$="From"]').css("background-color", "yellow");

/*

TIL:

1. You need to use .nextAll() instead of .next()

next() ONLY WORKS IF THE SELECT BOX IS  THE NEXT ELEMENT.

IF THERE IS ANYTHING IN BETWEEN, LIKE A <label>, then this won't work.

the earlier version of this only works because "to" was not inside a label

2. When "Closed" is chosen, set the "to" selectbox to "-" and don't allow any other choices

- set disabled attribute on the options that were not selected
- when value of "From" selectbox is NOT "Closed", then remove disabled attribute on the "To" options


*/


$('[class^="opening-hours-"]').find('select[id$="From"]').change(function () {
    if ($(this).val() == 'closed') {
        /*
                    DOES NOT WORK BECAUSE .next() only gets the immediately following element.
                    */
        var $toSelect = $(this).nextAll('select[id$="To"]');
        $toSelect.css("background-color", "red");
        $toSelect.val('-');
        $toSelect.find(':not(:selected)').attr('disabled','disabled');
    } else {
        $(this).nextAll('select[id$="To"]').find(':not(:selected)').removeAttr('disabled');
        $(this).nextAll('select[id$="To"]').css("background-color", "white");
        
        
    }
});