Conditional forms with data-attributes

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<form>
    <fieldset>
      <p for="a">Who is this registration for?</p>
      <div class="btn-group btn-group-vertical" data-toggle="buttons">
      
        <label for="b_1" class="btn">
          <input id="b_1" name="b" type="radio"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i> <span>  Myself</span>
        </label>
        
        <label for="b_2" class="btn">
          <input id="b_2" name="b" type="radio"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i> <span>  Someone else</span>
        </label>
      </div>
      
        <div data-master="b_1">
            <p>Are you a minor?</p>
            <input id="c_1" name="c" type="radio">
            <label for="c_1">Yes</label>
          
            <input id="c_2" name="c" type="radio">            
            <label for="c_2">No</label>
            
            <div data-master="c_1">
              Yes [Form with Adult and Minor, or NO]
            </div>
            
            <div data-master="c_2">
              No [Form with Adult]
            </div>
        </div>
        
        <div data-master="b_2">
            <p>Is this person a minor?</p>
            <input id="d_1" name="d" type="radio">
            <label for="d_1">Yes</label>
          
            <input id="d_2" name="d" type="radio">            
            <label for="d_2">No</label>
            
            <div data-master="d_1">
              Yes [Form with Adult and Minor]
            </div>
            
            <div data-master="d_2">
              No [Form with Adult and Adult]
            </div>
        </div>
    </fieldset>

CSS

form p {
    margin: 0;
    padding: 10px;
}

form p label {
    display: inline-block;
    width: 200px;
}


form p input[type="radio"] + label {
    width: auto;
    display: inline;
    margin: 0 10px 0 0;
}









label.btn span {
  font-size: 1.5em ;
}

label input[type="radio"] ~ i.fa.fa-circle-o{
    color: #c8c8c8;    display: inline;
}
label input[type="radio"] ~ i.fa.fa-check-circle-o{
    display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o{
    display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-check-circle-o{
    color: #7AA3CC;    display: inline;
}
label:hover input[type="radio"] ~ i.fa {
color: #7AA3CC;
}

label input[type="checkbox"] ~ i.fa.fa-square-o{
    color: #c8c8c8;    display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o{
    display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-square-o{
    display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{
    color: #7AA3CC;    display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
color: #7AA3CC;
}

div[data-toggle="buttons"] label.active{
    color: #7AA3CC;
}

div[data-toggle="buttons"] label {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 2em;
text-align: left;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: none;
border: 0px solid 
#c8c8c8;
border-radius: 3px;
color: #c8c8c8;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

div[data-toggle="buttons"] label:hover {
color: #7AA3CC;
}

div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
-webkit-box-shadow: none;
box-shadow: none;
}

JavaScript

// Every time some element is changed
$('form').on('change', function() {

    // Look for all the slaves
    $('[data-master]').each(function() {
        var slave = $(this);
        
        // Find the corresponding master
        var master = $('#' + slave.data('master')).first();
        
        // If the master is invisible, hide the slave
        if (!master.is(':visible')) {
            slave.hide();
            return;
        }
        
        // Toggle the slave visibility based on the master's type and value
        switch(master.attr('type')) {
            case 'radio':
            case 'checkbox':
                slave.toggle(master.prop('checked'));
                break;

            default:
                slave.toggle(master.val() === slave.data('master-value'));
                break;
        }
    });
    
// Initialize the form immediately
}).trigger('change');