JSFiddle - React, Tailwind, and code Playground

HTML

<form>
	<hr class="separate" />
	<!-- Question 1 -->
			
	<h3 class="question_title">Survey Question 1</h3>
	<label for="question_1">Question 1</label>
    <input type="text" name="question_1" value="" class="question_field" id="question_1">
			
	<label for="type_1">Type for Question 1</label>
	<div class="option_field">
		<select name="type_1" id="type_1" onchange="" size="1">
			<option value="oneline">One Line Text Field</option>
			<option value="freeresponse">Free Response Text Field</option>
			<option value="rating10">Rating (1-10)</option>
			<option value="rating4">Poor, Fair, Good, Excellent</option>
			<option value="dropdown">Drop-Down Menu</option>
		</select>
	</div>
	<div id="dropdown_list_1" class="dropdown_list">
		<label for="question_1_list">Question 1 List</label><input type="text" name="question_1_list" value="" class="question_list" id="question_1_list" placeholder="Option A,Option B,Option C,Option D">
	</div>
	
	<hr class="separate" />
	<!-- Question 2 -->
        
        
	<h3 class="question_title">Survey Question 2</h3>
	<label for="question_2">Question 2</label><input type="text" name="question_2" value="" class="question_field" id="question_2">
			
			
	<label for="type_2">Type for Question 2</label>
	<div class="option_field">
		<select name="type_2" id="type_2" onchange="" size="1">
			<option value="oneline">One Line Text Field</option>
			<option value="freeresponse">Free Response Text Field</option>
			<option value="rating20">Rating (1-10)</option>
			<option value="rating4">Poor, Fair, Good, Excellent</option>
			<option value="dropdown">Drop-Down Menu</option>
		</select>
	</div>
	<div id="dropdown_list_2" class="dropdown_list">
		<label for="question_2_list">Question 2 List</label><input type="text" name="question_2_list" value="" class="question_list" id="question_2_list" placeholder="Option A,Option B,Option C,Option D">
	</div>
			
			
	<hr class="separate" />
	<!-- Question 3 -->
			
			
	<h3...

CSS

.survey_name{
				font-size: 1.5em;
				width: 855px;
				height: 30px;
				margin: 10px 30px;
			}
			.question_title{
				font-size: 1.5em;
				margin: 30px 0 5px 0;
			}
			.question_field{
				width: 855px;
				margin: 10px 30px;
			}
			.question_list{
				width: 855px;
				margin: 10px 30px;
			}
			.option_field{
				margin: 5px 30px;
			}
			#triggered_group{
				background-color: lightgreen;
				border: thin dotted #404040;
				padding: 10px;
			}
			.dropdown_list{
				background-color: lightgreen;
				border: thin dashed #404040;
				padding: 10px;
			}
			.separate{
				
			}

JavaScript

$(document).ready(function() {
    $('#dropdown_list_1').hide();
    for(var i = 1; i <= 15; i++){
		$('#dropdown_list_'+i).hide();
	}
    
    $('#type_1').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_1').show();
        }else {
            $('#dropdown_list_1').hide();
        }
    });

    $('#type_2').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_2').show();
        }else {
            $('#dropdown_list_2').hide();
        }
    });

    $('#type_3').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_3').show();
        }else {
            $('#dropdown_list_3').hide();
        }
    });

});