JSFiddle - React, Tailwind, and code Playground

by farhan2056

HTML

<div class="main-box-area">
<div class="main-box">
<div class="small-box-area">
<div class="small-box">
</div>
     <button class="btn-add-small">Add small box</button>
</div>

</div>
<button class="btn-add-main">Add main box</button>
</div>

CSS

.main-box-area{
background:#ccc;
padding:20px;
}

.main-box{
background:#fff;
padding:20px;
margin-bottom:20px;
}

.small-box-area{
background:#f5f5f5;
margin-bottom:10px;
padding:20px;
}

.small-box{
padding:20px;
background:#666;
margin-bottom:10px;
}

JavaScript

jQuery( '.small-box-area' ).on( "click", '.btn-add-small', function(e) {
 e.preventDefault();
 var content = '<div class="small-box"><button class="btn-delete-small">Delete small box</button></div>';
 jQuery(this).closest('.small-box-area').prepend(content);
 });


 // LARGE BOX
 jQuery( '.main-box-area' ).on( "click", '.btn-add-main', function(e) {
 e.preventDefault();
 var content = '<div class="main-box"><div class="small-box-area">'
                            + '<div class="small-box"><button 
 class="btn-delete-small">Delete small box</button>'
                            + '</div>'
                            + '</div><button class="btn-add-small">Add 
 small box</button></div>';
 jQuery(this).closest('.main-box-area').prepend(content);
 });

 // DELETE SMALL BOX
 jQuery( '.small-box-area' ).on( "click", '.btn-delete-small', function(e) {
 e.preventDefault();
 jQuery(this).parent('.small-box').remove();
 });