JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<script src="http://getfirebug.com/firebug-lite-debug.js"></script>
<button name="foo" id="foo">Clone Me</button>

CSS

button { display: block; }

JavaScript

// #9777 Setting id on a clone sets all previous clones as well

var cloneField = function(ev) {
    console.clear();

    var clone = $("button:last").clone();
    var id = clone.attr("id") + "x";

    console.log( 'setting id: %s, on element: %o', id, clone );
    clone.attr("id", id);

    console.log(':::before append:::');
    $('button').each(function( i ) {
        console.log( 'index: %d, prop: %s, attr: %s', i,
                     this.id,
                     $(this).attr('id') );
    });

    clone.appendTo('body');

    console.log(':::after append:::');
    $('button').each(function( i ) {
        console.log( 'index: %d, prop: %s, attr: %s', i,
                     this.id,
                     $(this).attr('id') );
    });
};

$("button").live('click', cloneField );