JSFiddle - React, Tailwind, and code Playground

HTML

Show Div2: <input type="checkbox" id="isApplicant2" />
<div id="b2">Two</div>

<p id="p3">Show Div3: <input type="checkbox" id="isApplicant3" /></p>
<div id="b3">THREE</div>

<p id="p4">Show Div4: <input type="checkbox" id="isApplicant4" /></p>
<div id="b4">Four</div>

CSS

div{width:100px;height:20px;margin-bottom:20px;border:1px solid #ccc;text-align:center;padding:20px;display:none;}

#p3, #p4{display:none;}

JavaScript

/*
http://stackoverflow.com/questions/28733226/chaining-unbinding-jquery-toggles
*/

$("#isApplicant2").click(function () {
    if( $(this).is(':checked') ){
    	$("#b2").fadeIn(500);
        $('#p3').fadeIn(500);
        $('#p4, #b4').fadeOut(500);
    }else{
        $('#b2, #p3, #b3, #p4, #b4').fadeOut(500);
        $('#isApplicant3, #isApplicant4').prop('checked', false);
    }
});

$("#isApplicant3").click(function () {
	$("#b3").fadeToggle(500);
    $('#p4').fadeToggle(500);
    if( $(this).is(':checked') ){
    	$("#b3").fadeIn(500);
        $('#p4').fadeIn(500);
        $('#b4').fadeOut(500);
    }else{
        $('#b3, #p4, #b4').fadeOut(500);
        $('#isApplicant4').prop('checked', false);
    }
});

$("#isApplicant4").click(function () {
	$("#b4").fadeToggle(500);
});