I am cloning the content of div "template" into the div "placeholder" using 'add more' button.
I would like once I added 5 rows the add button to dissapear and once I remove one of the 5 to show again and be able to add again rows until they rich 5.
At the moment, because of if statement once I remove the rows the add button doesn't add anything as it has the condition to do it 5 times just.
Please help.
<div id="template">Clone me</div>
<div id="placeholder">
</div>
<div class="add">
<button class="add-row" type="button">Add more</button>
</div>
var maxAppend = 0;
$( ".add-row" ).click(function(){
maxAppend++;
if (maxAppend<5) {
$( "#template" ).clone().appendTo("#placeholder").append('<div class="remove"><button class="remove-row">Remove product</button></div>').find('input').val('');
}
});
$( "body" ).on('click', '.remove-row', function(){
$(this).closest('#template').remove();
});