JSFiddle - React, Tailwind, and code Playground

by chrisfrisina

HTML

<div id="main-container" class="wrapper">
    <div id="main" >
        <div class="block aside">
            <aside>
                <div class="nui">
                </div>
                <form class="form">
                    <fieldset class="businessapproaches">
                        <input type="checkbox" id="ba_all" name="ba_all"><label for="ba_all" style="display: inline; ">Business Approach</label><br>
                        <input type="checkbox" id="ba_analysis" name="ba_analysis"><label for="ba_analysis">Analysis</label><br>
                        <input type="checkbox" id="ba_communication" name="ba_communication"><label for="ba_communication">Communication</label><br>
                        <input type="checkbox" id="ba_budgeting" name="ba_budgeting"><label for="ba_budgeting">Budgeting</label><br>
                        <input type="checkbox" id="ba_teamwork" name="ba_teamwork"><label for="ba_teamwork">Teamwork</label><br>
                        <input type="checkbox" id="ba_intelligence" name="ba_intelligence"><label for="ba_intelligence">Intelligence</label><br>
                        <input type="checkbox" id="ba_enthusiasm" name="ba_enthusiasm"><label for="ba_enthusiasm">Enthusiasm</label><br>
                        <input type="checkbox" id="ba_time" name="ba_time"><label for="ba_time">Time</label><br>
                    </fieldset>
                </form>
            </aside>
        </div>
    </div>
</div>
<div class="block gc">
                    <section class="businessapproaches" style="display: block; "><input type="checkbox" checked="checked" id="header_business approach" name="header_business approach"><label for="header_business approach">Business Approach</label><br>
                        <section><input type="checkbox" checked="checked" id="ba_analysis" name="ba_analysis"><label for="ba_analysis">Analysis</label><br>
                                <p>Text</p>
                        </section>
                       ...

CSS

.block {
    display: inline-block;
    padding: 5px 5px 5px;
    margin: 5px 5px;
}

.gc {
    width:70%;
    float: left;
    border: 1px solid #F16529;
}
.aside {
    width: 25%;
    float: right;
}

JavaScript

// Business Approaches
    //hide initially
            $('fieldset.businessapproaches label').hide();
        // $('fieldset.businessapproaches > section > input').each( function () {$(this).hide()});
    //individual BA elements Toggle Buttons
        //Currently on, turning Off
            $('.block > .businessapproaches > section > input').on('change', function () {
                if (this.checked) {
                } else {
                    var index = $(this).prevAll('section').length;
                    $('.block > .businessapproaches > section').eq(index).hide();
                    $('fieldset.businessapproaches > label').eq(index+1).show();
                    $('fieldset.businessapproaches > input').eq(index+1).prop('checked' , false);
                    console.log("off")
                    console.log("left index: " + index);
                    console.log($('.block > .businessapproaches > section').eq(index));
                    console.log($('fieldset.businessapproaches > label').eq(index+1));
                }
            });
        //Currently off, turning On
            $('fieldset.businessapproaches > input').on('change', function () {
                if (this.checked) {
                } else {
                    var index = $(this).prevAll('section').length+1;
                    $('.block > .businessapproaches > section').eq(index-1).show();
                    $('.block > .businessapproaches > input').eq(index-1).prop('checked' , false);
                    $('fieldset.businessapproaches > label').eq(index).hide();
                    console.log("on")
                    console.log("right index: " + index);
                    console.log($('.block > .businessapproaches > section').eq(index-1));
                    console.log($('fieldset.businessapproaches > label').eq(index));
                }
            });
    //Toggle BA completely
        //Currently on, turning Off
            $('.block > .businessapproaches...