append method only inserted the element once

append method only inserted the element once

Hello everyone: 

I am doing an exercise to insert an html element after the selected elements.

1. I noticed that using append() method will let me insert the html element right after the matching elements

2. using insertAfter method will insert the html element directly below the mathching elements

However when I used the id element in the append method, it only insert the html element once, instead of inserting it for all the matching elements. Please review my code and advise me why it happened and what should I do to insert the element 3 times by using append(). Thanks!

P.S. i want to insert the button element 3 times for each paragraph with id value 'disclaimer' by using append method. 

  2. <html>

  4. <head>
  5.   <title>hello world</title>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.   <link rel="stylesheet" href="stylesheet1.css" type="text/css" />
  8.   
  9.   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script>
  10.  <script language="JavaScript" type="text/javascript">
  11.   <!--
  12.   $(document).ready(function(){
  13.     //declare a variable to hold input element button
  14. //can't append button to each paragraph
  15.     var test = $('<input type="button" id="toggleButton" value="hide" />');
  16.     
  17.    $('#disclaimer').append(test);

  19. //$('p').append(test);
  20.        //$(test).insertAfter('p');
  21. });
  22.  
  23.  
  24.   //-->
  25.  </script>
  26. </head>

  28. <body>
  29.   
  30.    <p id="disclaimer">this is the first paragraph</p>
  31.    <p id="disclaimer">this is the second paragraph</p>
  32.    <p id="disclaimer">this is the third paragraph</p>
  33.    
  34. </body>
  35. </html>