JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<form id="test">
    <select name='start_hour' id='start_hour'>
        <option value='All00'>All</option>
        <option value='0000'>00</option>
        <option value='0100'>01</option>
        <option value='0200'>02</option>
        <option value='0300'>03</option>
    </select>
    and 
    <select name='end_hour' id='end_hour'>
        <option value='All00'>All</option>
        <option value='0000'>00</option>
        <option value='0100'>01</option>
        <option value='0200'>02</option>
        <option value='0300'>03</option>
    </select>
</form>

JavaScript

var validator = $("#test").validate({
    rules: {
        start_hour: {
            schedule: true
        },
        end_hour: {
            schedule: true
        }
    }
});

jQuery.validator.addMethod("schedule", function(value, element) {

    var start_hour = $('select[name="start_hour"]');
    var end_hour = $('select[name="end_hour"]')
;

    alert(start_hour.val());
    alert(end_hour.val());
    if (start_hour.value == "All00" && end_hour.value != "All00") {
        alert('end hour all error');
        return false;
    }
    else if (end_hour.value == "All00" && start_hour.value != "All00") {
        alert('start hour all error');
        return false;
    }
    else if (end_hour.value <= start_hour.value) {
        alert('end hour must be larger error');
        return false;
    }

    else {return true;}
}, "Error with schedule");