JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

<div id="childemails" class="desc">
    <a href="#" id="addScnt">Add Another Child's Email</a>
    </div>

JavaScript

$(function() {
    var wrapper = $('#childemails');
    var maxField = 5;
    var i = 2; 
    $('#addScnt').on('click', function() {
        if( i < maxField)
        {
            $('<div datat-role="ui-field-contain"><label for="student_email'+ i +'">Child\'s School Email '+ i +'</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" id="student_email'+ i +'" name="student_email' + i +'" value="" placeholder="Student email" /></div><a href="#" class="remove_button">Remove</a></div>').appendTo(wrapper);
            i++;
        }
    });

    $(wrapper).on('click','.remove_button',  function(e) {
        e.preventDefault(); 
        $(this).parent().remove();
        i--;
    });
});