javascript - While adding a div content into another div on click of a button -

here code --

<div id="div1">      div 1       <form class="thisformtobeaddeverytime">     <!-- form add on click #btn1 -->     </form>  </div>  <div id="div2">      div 2         <form class="thisformtobeaddeverytime">              <!-- form add on click #btn2 -->       </form>   </div>  <div id="showtheaddedform">            //here form push on click button  </div>  <button type="button" id="btn1">add form1</button> <button type="button" id="btn2">add form2</button>  // click function in js file -  $(document).on("click","#btn1",function(){           $("#showtheaddedform").append($("#div1").html()); }); $(document).on("click","#btn2",function(){           $("#showtheaddedform").append($("#div2").html());   });    

now problem --

on click #bun1 it's adding content of #div1 #showtheaddedform (i.e. form attribute , element inside form), like

<div id="showtheaddedform">       <form class="thisformtobeaddeverytime">          <!-- form add on click #btn1 -->       </form> </div> 

but when i'm clicking #btn2 it's adding element inside form , like

  <div id="showtheaddedform">      <!-- form add on click #btn2 -->   </div> 

[ note : i've not written kind of remove query ]

..any idea , how it's removing !!!

both buttons have same id. there syntax mistake in

$(document).on("click","#btn1",function(){       $("#showtheaddedform").append($("#div1").html());  } 

add

); 

demo

actually form tag getting append div on second button's click. in ui not shown doesnt have tags or text in it. try giving text or tag in it. work

edit

updated fiddle