Ошибка при добавлении анимации в динамический элемент в jQuery

Question

Не могли бы вы взглянуть на this demo и сообщить мне, почему я не могу добавить функцию .slideDown() в процесс ввода динамического div после родителя выбранного элемента?

$(function() { 
 
    $("button").on("click", function() { 
 
     $(".err").hide(); 
 
     var elem = $(this); 
 
     elem.parent().after('<div class="alert alert-danger err" role="alert">Thanks For Adding</div>').slideDown("slow"); 
 
    }); 
 
});

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"); 
 
body { 
 
    padding:50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="well well-sm box"> 
 
    <button class="btn btn-default btn-block" type="submit">Add Box</button> 
 
</div> 
 
<div class="well well-sm box"> 
 
    <button class="btn btn-default btn-block" type="submit">Add Box</button> 
 
</div> 
 
<div class="well well-sm box"> 
 
    <button class="btn btn-default btn-block" type="submit">Add Box</button> 
 
</div> 
 
<div class="well well-sm box"> 
 
    <button class="btn btn-default btn-block" type="submit">Add Box</button> 
 
</div> 
 
<div class="well well-sm box"> 
 
    <button class="btn btn-default btn-block" type="submit">Add Box</button> 
 
</div>

Answer 1

Это должно работать :)

$(function() { 
    $("button").on("click", function() { 
     var elem = $(this); 
     var $div = $('<div/>',{class: 'alert alert-danger err',role: 'alert'}).hide().text('Thanks For Adding'); 
     $div.insertAfter(elem.parent()); 
     $div.slideDown("slow"); 
    }); 
}); 

https://jsfiddle.net/dja0jxm3/1/