JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<h3>Emergency Contacts</h3>

<hr />
<div class="addcon">
    <form name="add_contact">
        <label for="EmergeContactType">Affilation</label>
        <select name="properties[EmergContactType]">
            <option value="1">Primary</option>
            <option value="2">Secondary</option>
            <option value="3">Doctor</option>
            <option value="4">Aunt</option>
            <option value="5">Uncle</option>
            <option value="1">Babysitter</option>
            <option value="2">Caregiver</option>
            <option value="3">Grandmother</option>
            <option value="4">Grandfather</option>
            <option value="5">Step-mother</option>
            <option value="5">Step-father</option>
        </select>
        <br />
        <label for="EmergeContactType">Name</label>
        <input type="text" size="20" class="emerg" name="properties[EmergencyName]" align="right" />
        <br />
        <label for="EmergeContactType">Number</label>
        <input type="text" width="15" maxlength="15" class="emerg" name="properties[EmergContactNum]" pattern="[789][0-9]{9}" align="right" />
    </form>
</div>
<a href="#" class="addContact">Add Contact</a>

JavaScript

//http://stackoverflow.com/questions/26179882/dynamically-add-and-remove-php-form-fields-//from-form-jquery

$('.addContact').click(function(e) {
    e.preventDefault();
    var clonedForm = $('form[name="add_contact"]:first').clone(); // clone the form
    $('.addcon').append(clonedForm); // append the form to the div
    var removeLink = '<a href="#" class="removeContact">Remove Contact</a>'; // create a remove link
    $('form[name="add_contact"]:last').append(removeLink);
});
$('.addcon').on('click', '.removeContact', function(e) { // use on() to delegate
    e.preventDefault();
    $(this).closest('form').remove();
});