JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div id="AddQualificationSelect">
<a href="#" class="add">Add</a>
</div>

<div id="ProfileFormContainer">
Form Container
</div>

JavaScript

$("#AddQualificationSelect a.add").click(function (e) {
e.preventDefault();
$("#ProfileFormContainer").append('<form method="post" id="QualificationSelect" title="Qualifications">');
$("#QualificationSelect").append('<h3>Qualifications</h3>');
$("#QualificationSelect").append('<label for="QualificationType"> Type:</label>');
$("#QualificationSelect").append('<select name="QualificationType" id="QualificationType">');
$("#QualificationType").append('<option selected>Select</option>');
$("#QualificationType").append('<option value="GCSE">GCSE</option>');
$("#QualificationType").append('<option value="ALevel">A Level</option>');
$("#QualificationType").append('<option value="Degree">Degree</option>');
$("#QualificationType").append('<option value="Masters">Masters</option>');
$("#QualificationType").append('<option value="PHD">PHD</option>');
$("#QualificationType").append('<option value="Other">Other</option>');
//$('#QualificationSelect').show();
});

$('#ProfileFormContainer').on('change', '#QualificationType', function(){
var val = $(this).val();

var school = $('<label for="School">School / College:</label><input name="School" type="text" id="School" maxlength="100" form="QualificationSelect" required><br><label for="Subject">Subject:</label><input name="Subject" type="text" id="Subject" maxlength="100" form="QualificationSelect" required><br><label for="Grade">Grade:</label><input name="Grade" type="text" id="Grade" maxlength="50" form="QualificationSelect" required><br><label for="StartDate">Dates From:</label><input type="date" name="StartDate" id="date" class="datepicker" form="QualificationSelect" required><label for="EndDate" class="labelindent">To:</label><input type="date" name="EndDate" id="EndDate" class="datepicker" form="QualificationSelect" required><br /><input name="Qualifications" type="submit" disabled="disabled" class="submitBtn" id="QualificationSubmit" form="QualificationSelect" value="Save"><input type="hidden" name="Type" id="Type">');
var...