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="cu5aoupfGdHzZkkG0MZWbgeTCxmQt8Y7Ad4diNfX">
                     <input name="survey_id" type="hidden" value="10">
                     <input name="call_id" type="hidden" value="30">
                     <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">
                              <div class="survey-control-title">
                              </div>
                              <div class="radio">
                                 <label for="item_827">
                                 <input type="radio" name="control_302" id="item_827" value="300:827"  > Steuber, Brakus and Keeling
                                 </label>
                              </div>
                              <div class="radio">
                                 <label for="item_427">
                                 <input type="radio" name="control_302" id="item_427" value="300:427"  > Kulas Ltd
                                 </label>
    ...

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

$("input[type='radio'], input[type='checkbox']").change(function(e) {
      
        $(this).each(function(index, item){

            var newGroupName = '';

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

                newGroupName = getGroupElement( $(this).val() );

                $('#' + newGroupName).show();
            } else {
                newGroupName = getGroupElement( $(this).val() );
                
                $('#' + newGroupName).hide();
            }
        });


    }).change();


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