JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Page Content-->
<div class="container">
   <form method="POST" action="https://aholdms2.app/survey/store" accept-charset="UTF-8" class="form" id="survey_form">
      <input name="_token" type="hidden" value="L3MgXE4mPkTw2LSAIS5xUuNjPOm9UJRtgGER6VIm">
      <input name="survey_id" type="hidden" value="10">
      <input name="call_id" type="hidden" value="1">
      <input id="survey-nav-direction" name="direction" type="hidden" value="next">
      <input id="survey-optional-controls" name="optionals" type="hidden" value="">
      <input id="survey-is-terminated" name="terminated" type="hidden" value="">
      <div class="questionPanel panel panel-default " id="question_51">
         <div class="panel-heading">5) Which one food store is located most conveniently for you to shop at if you wished?</div>
         <div class="panel-body">
            <fieldset class="survey-control-fieldset" id="wrapper_302_0">
               <div class="survey-control-title">
               </div>
               <div class="radio">
                  <label for="item_302_23_0">
                  <input type="radio" name="control_302[0]" id="item_302_23_0" value="300:23"  data-itemtype="Answer"> Whole Foods
                  </label>
               </div>
               <div class="radio">
                  <label for="item_302_22_0">
                  <input type="radio" name="control_302[0]" id="item_302_22_0" value="300:22"  data-itemtype="Answer"> Wegmans
                  </label>
               </div>
               <div class="radio">
                  <label for="item_302_19_0">
                  <input type="radio" name="control_302[0]" id="item_302_19_0" value="300:19"  data-itemtype="Answer"> Walgreens
                  </label>
               </div>
               <div...

CSS

.survey-question-fieldset:not(:first-child) {

	margin-top: 25px;

}

.survey-question-legend {


}

.survey-control-fieldset {
	margin: 15px 0 15px 20px;
}

.survey-control-legend {

	font-weight: bold;
	font-size: 100%;
}


.survey-control-title {

	font-weight: bold;
	padding-bottom: 5px;
	font-size: 100%;
}


.page-center {


    margin: 0 auto;
    margin-top: 50px;
    text-align: center;

    font-size: 120%;
    color: green;
}


.hiddenGroup {
	display: none;
}

JavaScript

$(function(){

    //Navigation bar  buttons
	$('.survey-navigator').on('click', function(e){

		e.preventDefault();
		
		$(this).attr('disabled','disabled');
		$(this).text('Processing...');

		if($(this).attr('id') == 'survey-previous'){
			$('#survey-nav-direction').val('previous');
		}

		$('#survey_form').submit();
	});



	function getGroupElement(value)
	{
		return 'group_' + value.replace(':', '_');
	}

    function applyLogicToShowHideOtherDividers(item)
    {

        var newGroupName = getGroupElement( $(item).val() );

        //console.log( newGroupName );

        if( $(item).is(':checked') ){

            $('#' + newGroupName).show();

        } else {

            $('#' + newGroupName).hide();
        }

    }


    $(":checkbox").change(function(e) {

        var name = $(this).attr('name');

        applyLogicToShowHideOtherDividers( $(this) );

        var className = 'terminated_' + getContronId( name );

        var inputName = getControlName(name);

        var existingElements = $('#survey-optional-controls').val().split('|') || [];
        //Hide all groups that have the class equal to className
        // var isTerminatorChecked = $("input:checkbox[data-itemtype='Terminator']").is(":checked");
        // 
        var isTerminatorChecked = $("input[name='"+inputName+"']:checkbox[data-itemtype='Terminator']").is(":checked");

        var skipper = $("input[name='"+inputName+"']:checkbox[data-itemtype='Skipper']");

        console.log( skipper );

        if( skipper.is(":checked")){

            $(this).attr('checked', false);

            skipper.attr('checked', true);

        }

        //Hide all groups that have the class equal to className
        if (isTerminatorChecked) {

            hideControls($(this), existingElements, className);

        } else {

            showControls(existingElements, className);

        }

    
    }).change();


    $(":radio").change(function(e) {

        var name = $(this).attr('name');

       ...