JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<div id="target"></div>
<button id="clone">Clone</button>

JavaScript

$(".live").live("focus",function(e) {
    console.log($(this));
    if ( !$(this).data("autocomplete") ) {
        e.preventDefault();
        $(this).autocomplete({
            source:['abc','ade','afg']
        }).trigger("focus");
        return false;
    }
});

$(document).on("focus",".on",function(e) {
    console.log($(this));
    if ( !$(this).data("autocomplete") ) {
        e.preventDefault();
        $(this).autocomplete({
            source:['abc','ade','afg']
        }).trigger("focus");
        return false;
    }
});

setTimeout(function() {
    $("#target")
        .append('<span>live:</span>')
        .append('<input class="live"/>')
        .append('<span>on:</span>')
        .append('<input class="on"/>');
},1000);

var count = 0;
$("#clone").click(function() {
    var newid = "cloned_" + (count++);
    var clone = $(".on:eq(0)")
        .clone()
        .attr("id",newid) // Necessary with clone
        .val("") // Clear the value
        .appendTo(target);
});