JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<form id="qualification-form">
	<fieldset id="qualification-form-1" class="qualification-form">
		<div class="form-group">
			<label for="qualification-1">Qualification</label>
			<select class="form-control" id="qualification-1" name="qualification[]" required>
				<option>Please select a qualification</option>
				<option value="1">Computer Science</option>
				<option value="2">Mathematics</option>
			</select>
		</div>

		<div class="form-group">
			<label for="grade-1">Grade</label>
			<select class="form-control" id="grade-1" name="grade[]" required>
				<option>Please select a grade</option>
				<option value="A">A</option>
				<option value="B">B</option>
				<option value="C">C</option>
			</select>
			<p class="help-block">Please select a qualification before you select a grade</p>
		</div>

		<div class="form-group">
			<label for="date-achieved-1">Date Achieved</label>
			<input type="date" class="form-control" id="date-achieved-1" name="date-achieved[]" >
		</div>

		<div class="form-group">
			<label for="institution-1">Institution</label>
			<select class="form-control" id="institution-1" name="institution[]" required>
				<option>Please select an institution</option>
				<option value="University of Wolverhampton">University of Wolverhampton</option>
				<option value="Curch of Scientology">Curch of Scientology</option>
				<option value="Esoteric Church of Dagon">Esoteric Church of Dagon</option>
			</select>
			<p class="help-block">Please select a qualification before you select a grade</p>
		</div>

		<!-- button type="button" class="btn btn-danger remove-qualification-form">Cancel</button -->
	</fieldset>

	<fieldset id="qualification-form-2" class="qualification-form hidden">
		<div class="form-group">
			<label...

CSS

fieldset {
  margin-bottom: 1.5em;
}

JavaScript

// When "Add another Qualification" is clicked
$('#add-qualification-form').on('click', function () {
	// Find the first hidden qualification fieldset and remove the hidden class
  $('.qualification-form.hidden:eq(0)').removeClass('hidden');
});

// When "Cancel" is clicked
$('.remove-qualification-form').on('click', function () {
	// Find the parent fieldset and add hidden class
  $(this).parent('fieldset').addClass('hidden');
});

// Dump out the values on submit to see what they are
$('#qualification-form').on('submit', function () {
	console.log($(this));

	// Don't submit -.-
	return false;
});