JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css">
<div class="container">
    
</div>
<input type="button" value="Add More" id="addmore"/>

CSS

.box{
    
    width:200px;
    border:1px solid red;
    
}
.hd{
    width:100%;
    height:20px;
    border:1px solid black;
}

JavaScript

$("#addmore").click(function(){
    
    var $newBox = $('<div class="box">'+
                    '<div class="hd"><a href="#" class="cln">clone</a> </div>'+
                    '<div class="items">'+
                    '<input class="edit" type="text" value="click to edit..."/>'+
                    '</div>'+
                    '<div><a href="#" class="addmore">add more..</a></div>'+
                    '</div>')
        .appendTo(".container");
    
    $(".edit",$newBox).click(function(){
        $(this).val(' ');
    });
    $(".edit",$newBox).blur(function(){
        if($(this).val() == ' ')
            $(this).val('click to edit...');
    });
    
    $(".addmore",$newBox).click(function(){
        var $box = $(this).parents('.box:first');
        $box.find('.edit:first')
            .clone(true).val('click to edit...')
            .appendTo($box.find('.items'));
    });
    
    $(".cln",$newBox).click(function() {
        var $box = $(this).parents('.box:first');
        $box.after($box.clone(true));
    });
    
    $(".hd",$newBox).hover(
        // This could be done with CSS, as long as
        //   you're not worried about IE6 support for this feature
        function(){ $(this).css({backgroundColor: 'red'}); },
        function(){ $(this).css({backgroundColor: 'white'}); });
    
});