JSFiddle - React, Tailwind, and code Playground
HTML
<button type="button">Add another field</button>
<fieldset>
<legend>Static Field</legend>
<input type="text">
<input type="text">
<span></span>
</fieldset>
CSS
fieldset { margin: 10px; border: 1px solid black; padding:10px; }
JavaScript
$(function () {
var boxcount = 0, src = $("fieldset");
$(document.body).delegate("input", "input", function (e) {
$("span").text(this.value);
});
$("button").click(function () {
src.clone().appendTo(document.body).children("legend").text("Dynamic Field "+(++boxcount));
});
});
(function($) {
// Handler for propertychange events only
function propHandler () {
var $this = $(this);
if (window.event.propertyName == "value" && !$this.data("triggering.inputEvent")) {
$this.data("triggering.inputEvent", true).trigger("input");
window.setTimeout(function () {
$this.data("triggering.inputEvent", false);
}, 0);
}
}
$.event.special.input = {
setup: function(data, namespaces) {
var timer,
// Get references to the element
elem = this,
$elem = $(this),
// Store the current state of the element
state = elem.value,
// Create a dummy element that we can use for testing event support
tester = document.createElement(this.tagName),
// Check for onpropertychange
onprop = "onpropertychange" in tester,
// Check for native oninput
oninput = "oninput" in tester || (!onprop && checkEvent(tester)),
// Generate a random namespace for event bindings
ns = "inputEventNS" + ~~(Math.random() * 10000000),
// Our "last resort" event names
evts = ["focus", "blur", "paste", "cut", "keydown", "drop", ""].join("."+ns+" ");
function checkState () {
if (elem.value != state && !$elem.data("triggering.inputEvent")) {
state = elem.value;
$elem.data("triggering.inputEvent", true).trigger("input");
window.setTimeout(function () {
...