JSFiddle - React, Tailwind, and code Playground
HTML
<form action="submit.php" method="post">
<div id="masterQuestion" class="questionWrapper" style="">
<p>Question</p>
<p>
<select class="questiontype" name="questiontype">
<option value="">Question Type</option>
<option value="q1">Free Response</option>
<option value="q2">Multiple Choice</option>
<option value="q3">Yes/No</option>
</select>
</p>
<div class="q1 question">
<input type="text" name="question"/>
<input type="text" name="answer"/>
</div>
<div class="q2 question">
<input type="text" name="question"/>
<input type="text" name="answer"/>
</div>
<div class="q3 question">
<input type="text" name="question"/>
<input type="text" name="answer"/>
</div>
</div>
<!--Don't clone below this line -->
<div id="addquestion">
<button type="button">Add Question</button>
</div>
<input type="submit" value="Submit" />
</form>
CSS
.questionWrapper { border-bottom: 1px solid red;margin-bottom: 10px; padding-bottom: 10px; }
#addquestion { margin-top: 30px; padding-top: 10px; border-top: 1px solid green; }
.question { display:none; }
JavaScript
$(document).ready(function() {
$(document).on('change', '.questiontype', function() {
//grab the relevant question block
var questionWrapper = $(this).parents('.questionWrapper');
//hide all 3 question types
questionWrapper.find('.question').hide();
//show the correct question type (based on classes called q1, q2, q3)
$("." + $(this).val(), questionWrapper).show();
});
$('#addquestion button').click(function() {
//clone the #masterQuestion block
var newQuestionBlock = $('#masterQuestion').clone();
//remove the iD from the close (remember IDs need to be unique)
newQuestionBlock.removeAttr('id');
//hide the questions types
newQuestionBlock.find('.question').hide();
//insert the new question block into the DOM
$('#addquestion').before(newQuestionBlock);
});
});