JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

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

CSS

button { display: block; }

JavaScript

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

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

    var clone = $("button:last").clone();
    var name = clone[0].name + "x";

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

    console.log( 'setting name: %s, on element: %o', name, clone );
    clone[0].name = name;
    //clone.attr("name", name);
    
    console.log('\nbefore append:::');
    $('button').each(function( i ) {
        console.log( 'index: %d, prop: %s, attr: %s', i,
                     this.name,
                     $(this).attr('name') );
    });

    clone.appendTo('body');

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

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