JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<div class="container">
    <div class="row">
        <p>I'm a row</p>
    </div>
    
</div>
<a href="#" class="add_row">Add Row</a>

CSS

.row {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 5px;
    background-color: slateGrey;
    float: left;
}

a.add_row {
    float: left;
}

JavaScript

var count = 0;
$("a.add_row").click(function() {
				
				var remove_row = ("<br><a href='#' class='remove_row'>remove</a>");
			
				 
				count++;
              var cloned = $('.container').children('.row').first().clone();     
    cloned.appendTo('.container');
    
   
     
    cloned.find('p').append(count);
    cloned.find('p').append(remove_row);
});

$('body').on('click', '.remove_row', function(){
    $(this).closest('.row').fadeOut();
    count--;
    
});