jquery - Slide cloned element down when it appears

Question

I have the following code that clones a div and it's content on clicking a button. The clone part works but when it outputs the cloned div I want it to slide down.

This is what I've tried but the cloned div just appears rather than sliding down. Where am I going wrong?

$(".add-prod-group").on('click', function(){
  var ele = $(this).next().next().next('.group-add-prod').clone(true);
  $(this).next().next().next('.group-add-prod').after(ele).slideDown();
});

HTML:

<a href="#" class="add-prod-group">+</a>
<p class="text-center">Add products to your order</p>
<hr />
<div class="group-add-prod">
  <p>contents</p>
</div>

https://jsfiddle.net/dx29Lfo8/

question from:https://stackoverflow.com/questions/65846400/slide-cloned-element-down-when-it-appears

Answer 1

You can make newly added div as display:none then after adding it to your DOM you can use $(".group-add-prod:last").slideDown(); to make that div visible.

Demo Code :

$(".add-prod-group").on('click', function() {
  //get first div clone it
  var ele = $(this).siblings('.group-add-prod:first').clone(true);
  //add class none
  $(ele).addClass("none")
  //add it after last div
  $(this).siblings('.group-add-prod:last').after(ele)
  $(".group-add-prod:last").slideDown(); //slide it
});

.none {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="add-prod-group">+</a>
<p class="text-center">Add products to your order</p>
<hr />
<div class="group-add-prod">
  <p>contents</p>
</div>