Adding animation to Dynamic element

by Akram kamal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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>

CSS

body {
    padding:50px;
}
.none{
    display:none;
}

JavaScript

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