JSFiddle - React, Tailwind, and code Playground

HTML

<form action="/test/create/" name="Test_instructions" method="POST">
	<div class="form">
		<h3>Info about the test</h3>
		<div class="row">
			<label for="Test_instructions">Instructions for this test</label>
			<textarea name="Test[instructions]" id="Test_instructions"></textarea>
		</div>

		<div class="row">
			<label for="Test_attempts_allowed">Number of Attempts Allowed</label>
			<input type="text" name="Test[attempts_allowed]" id="Test_attempts_allowed" />
		</div>

		<div class="row">
			<label for="Test_passing_score">Passing Score</label>
			<input type="text" name="Test[passing_score]" id="Test_passing_score" />%
		</div>
		<h3>Test Questions</h3>
		<div class='test-questions'>
		</div>

	</div>
	<div class="row submit">
		<input type="submit" value="Create" class="submit-btn" />
	</div>
</form>
<div class="add-btn">
<button class='btn-add-tf' type="button">+ True/False</button> /
<button class='btn-add-mult' type="button">+ Multiple Choice</button> /
<button class='btn-add-sa' type="button">+ Short Answer</button> /
<button class='btn-add-essay' type="button">+ Essay</button>
</div>

CSS

.submit{
	clear: both;
	padding: 5px;
}

.submit-btn{
	padding: 5px;
}

.add-question{
	position: relative;
	float: left;
	display: table;
	width: auto;
	border: 1px solid darkgrey;
	padding: 10px;
	margin: 15px 15px 15px 0;
}

.add-btn{
	display: table;
	width: auto;
	clear: both;
	padding: 10px;
	margin: 15px 0;
}

JavaScript

$(document).ready(function(){
	var i = 1;
	$('.btn-add-tf').click(function(e){
		addTrueFalse(i);
		i++;
	});
	$('.btn-add-mult').click(function(e){
		addMultChoice(i);
		i++;
	});
	$('.btn-add-sa').click(function(e){
		addShortAnswer(i);
		i++;
	});
	$('.btn-add-essay').click(function(e){
		addEssayQuestion(i);
		i++;
	});
	$('button.btn-wrong').live('click', function(e) {
		alert("yay!");
	})
});

function addTrueFalse(i){
	$('.test-questions').append('<div class="add-question">' +
		'<label for="Question_description">Question</label>' +
		'<input type="text" name="question[description][]" /> True <input type="radio" name="question_answer[answer]['+ i +']" id="question_answer['+ i +']" value="1" />' +
		' False <input type="radio" name="question_answer[answer]['+ i +']" id="question_answer['+ i +']" value="0" />' +
		'</div>'
	);
}

function addMultChoice(i){
	$('.test-questions').append('<div class="add-question mult-choice">' +
		'<input type="hidden" name="question[type][]" value="mult" /> ' +
		'<label for="question_is_bonus">Bonus Question?</label>Yes <input type="radio" name="question[is_bonus]['+ i +']" id="question_is_bonus['+ i +']" value="1" /> No <input type="radio" id="question_is_bonus['+i+']" name="question[is_bonus]['+i+']" value="0" />' +
		'<label for="Question_description">Question</label><input type="text" name="question[description]['+ i +']" /><br />' +
		'<label for="Question_max_points">Max Points</label><input type="text" name="question[max_points]['+ i +']" /><br />' +
		'<label for="Answer_answer">Correct Answer</label><input type="text" name="answer[answer][correct]['+ i +']" /><br />' +
		'<label for="Answer_answer">Wrong Answer</label><input type="text" name="answer[answer][wrong]['+ i +']" /><br />' +
		'<div class="wrong-answers"></div>' +
		'<button class="btn-wrong" type="button">+ wrong answer</button>' +
		'</div>');
}

function addShortAnswer(i){
	$('.test-questions').append('<div class="add-question">' +
		'<label...