pagination for appended div <p>I want to append content of div_2 in show_form div every time when i click on add more button.after appending appending div will slide by next and previous button by pagination.please help me out.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="div_2" class="div_2"&gt; this is div 2 &lt;form class="this_form"&gt; &lt;input type="name"&gt; &lt;textarea placeholder="message"&gt; &lt;input type="button" value="buttons" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id="show_form" class="show_form"&gt; &lt;/div&gt; &lt;button class="btnn" type="button" id="btnn"&gt;add more&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>here is my javascript code</p> <pre><code> &lt;script&gt; $(document).ready(function(){ $("body").on("click",".btns",function(){ $(".show_form").append($(".div_2").html()); $('.div_2').animate( { 'margin-left':'1000px' },function(){ $(".div_2").remove() $('#show_form').attr("id","div_2"); $('#div_2').addClass('div_2'); $('#div_2').removeClass('show_form'); $( "#div_2" ).after(function() { return "&lt;div id='show_form' class='show_form'&gt;&lt;/div&gt;" }); $('#show_form').addClass('show_form') }) $('.show_form').show("slow"); } ); }); &lt;/script&gt; </code></pre>