JSFiddle - React, Tailwind, and code Playground

by jkeyes

HTML

<div id="forms">
</div>

<div id="actions">
  <button>New Form</button>
</div>

CSS

#forms form {
    margin: 2em 0;
}

JavaScript

$('body').on('click', '#actions button', function(evt) {
    var numForms = $('form').length + 1;
    var newForm = $('<form method="GET"><input type="hidden" name="formIndex" value="' + numForms + '"><button type="submit">Submit ' + numForms + '</button></form>');
    $('#forms').append(newForm);
});

$('body').on('submit', 'form', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    var value = $('input[name=formIndex]', this).val();
    alert("Form submitted: " + value);
});