JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row" id="joinForm">
	<div class="col-sm-12">
		<form class="form">
			<fieldset id="teenField">
				<legend>Your Teenager's Information</legend>
				<div class="teen">
					<div class="row">
						<div class="col-sm-6">
							<label for="teen1">Name <sup>(First and last)</sup></label>
							<input class="form-control" name="teen[]_name" type="text" placeholder="Enter name" required>
						</div>
						<div class="col-sm-2">
							<label>Birthday</label>
							<select class="form-control" name="teen[]_birthday-month">
								<option value="" disabled selected>Month</option>
								<option value="January">January</option>
								<option value="February">February</option>
								<option value="March">March</option>
								<option value="April">April</option>
								<option value="May">May</option>
								<option value="June">June</option>
								<option value="July">July</option>
								<option value="August">August</option>
								<option value="September">September</option>
								<option value="October">October</option>
								<option value="November">November</option>
								<option value="December">December</option>
							</select>
						</div>
						<div class="col-sm-2">
							<select class="form-control" name="teen[]_birthday-day">
								<option value="" disabled selected>Day</option>
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
								<option value="6">6</option>
								<option value="7">7</option>
								<option value="8">8</option>
								<option value="9">9</option>
								<option value="10">10</option>
								<option value="11">11</option>
								<option...

CSS

body {
    padding: 2em;
}

.row > div, .teen {
    margin-bottom: 1em;
}

JavaScript

// Clones the row but they're all using the same name
$("#joinForm .toggle").click(function() {
	$('#teenField .teen:first').clone(true).appendTo('#teenField');
});



// Started to do something like this

// var n = $("#teenField .teen").length + 1;
// n++;