JSFiddle - React, Tailwind, and code Playground

by PeteLopez

HTML

<label class="addDealLevel1 checkbox">
                                        <input type="checkbox" id="kefChkBox" />
                                        Kids Eat Free
                                    </label>
                                    <label class="addDealLevel2 dayOfChkBox">
                                        <input type="checkbox" id="kefMonChkBox" />
                                    Monday
                                    </label>
                                        <div class="form-inline">
                                            <label class="kefLevel3">
                                                From:
                                                <select class="span1 time" contenteditable="true">
                                                    <option>88:88 AM</option>
                                                </select></label>
                                            <label class="kefLevel3">
                                                To:
                                                <select class="span1 time" contenteditable="true">
                                                    <option>88:88 AM</option>
                                                </select></label>
                                        </div>
                                        <br />
                                        <div class="form-inline">
                                            <label class="kefLevel3">
                                                Ages:
                                                <select class="span1 time" contenteditable="true">
                                                    <option>0</option>
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                   ...

JavaScript

$('.addDealLevel2').hide();
$('.addDealLevel1').change(function() {
    if ($(this).children(':first').is(':checked')) {
        $('.addDealLevel2').show();
    } else {
        $('.addDealLevel2').hide();
    }
});
$('.addDealLevel2').change(function(e) {
    var sender = e.target;
    console.log(sender);
    if (sender.type == 'checkbox') {
        if ($(this).children(':first').is(':checked')) {
            $(this).children().next().show();
        } else {
            $(this).children().next().hide();
        }
    }
});
$('.addDealLevel2 select').change(function(e) {
    e.stopPropagation();
});