JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form id="config" method="post" action="config.php">
<div id="configField"></div>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">
</form>
JavaScript
$(document).ready(function(){
$("#config").validate();
});
$(document).ready(function() {
$('.remove').click(function(){
$(this).parent().remove();
});
$("#add").click(function() {
var intId = $("#configField div").length + 1;
var label = $("<label>Field Name:</label>");
var labelType = $("<label>Field Type:</label>");
var labelReq = $("<label>Require:</label>");
var labelTag = $("<label>Tag:</label>");
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name=\"RName" + intId + "\" class=\"required\" />");
var fTag = $("<input type=\"text\" name=\"Tag" + intId + "\" class=\"required\" />");
var fReq = $("<select class=\"required\" name=\"Req" + intId + "\" ><option selected=\"\" value=\"\">Please Select</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
var fType = $("<select class=\"required\" name=\"RType" + intId + "\" ><option selected=\"\" value=\"\">Please Select</option><option value=\"txt\">Text</option><option value=\"int\">Numbers</option><option value=\"bool\">Boolean</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append('<br>');
fieldWrapper.append(label);
fieldWrapper.append(fName);
fieldWrapper.append('<br>');
fieldWrapper.append(labelType);
fieldWrapper.append(fType);
fieldWrapper.append('<br>');
fieldWrapper.append(labelReq);
fieldWrapper.append(fReq);
fieldWrapper.append('<br>');
fieldWrapper.append(labelTag);
fieldWrapper.append(fTag);
...