JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<script src="http://getfirebug.com/firebug-lite-debug.js"></script>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<div id="foo">Clone Me</div>

CSS

div {
    display: block;
    border: 1px solid #ccc;
    padding: 3px;
}

JavaScript

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

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

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

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

    clone.appendTo('body');

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

$("body").on('click', 'div', cloneField );