JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<button id="add">Add field</button><br><br>Add as many fields as you like, then click around to see if a focus event occurs only on the last one, then add some more and try it some more.<br><br>
<div id="top">
    <input class="test" />
    <input class="test" />
</div>

CSS

#top {
    margin-bottom: 30px;
}

JavaScript

$("#add").click(function() {
    $("#top").append("<input class='test' />");
});

$("#top").on("focus", ".test:last-child", function() {
    log("got focus event for input #" + ($(this).index() + 1));
});


function log(args) {
    var str = "";
    for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] === "object") {
            str += JSON.stringify(arguments[i]);
        } else {
            str += arguments[i];
        }
    }
    var div = document.createElement("div");
    div.innerHTML = str;
    document.body.appendChild(div);
}