Adding divs by cloning them

Cloning divs and appending them to the container. This could be used in add forms dynamically as well as modifying/incrementing the form field ids based on their cloned order.

by Joe Saad

HTML

<div id="main_Container">
<div class="content_1">a urna odio enim augue in phasellus arcu! Cum, elit dapibus non quis lorem, nunc turpis, dictumst massa ac? Placerat, turpis tincidunt! Natoque porttitor, ultrices porttitor tortor urna nec! Purus etiam? Eu dapibus dictumst et eros et cum, egestas porta amet dolor quis! Turpis, aliquam odio? Lorem ut, est in integer facilisis! Parturient augue amet, et, phasellus auctor dolor. Cum adipiscing enim egestas urna! Tincidunt ut, dignissim eros! Ac adipiscing ultricies auctor mauris, natoque duis scele</div>
</div>
<button type="button">Add Div</button>

CSS

#main_Container {border:1px solid red;}    
.content_1 {border:1px solid blue;}

JavaScript

$(document).ready(function(){

    $('button').click(function(){
    
        //alert($(this).prev().attr('class'));
        $('div#main_Container div:last-child').clone().appendTo('#main_Container');
        
        $('div#main_Container div').each(function(i){
        
            $(this).attr('id',i);
            $(this).append($(this).attr('id'));
        
        });
    
    });
    

});