title: Multiple modals in one page
body: <p>I'm trying to get multiple modals (popup thingies) in one page.</p>
  
  <p>One button will let you see what subject you have, and when you click on it an modal will open and show you at what time and what the homework was.</p>
  
  <p>The other button will let you add new data, and a modal will open that let you add new data.</p>
  
  <p>The new data modal is made first.</p>
  
  <p>But now I have the problem that when I click the subject button  the modal of the new data button will appear, and I have no idea why.</p>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              $(document).ready(function(){
             $(".btn").click(function(){
          $("#myModal1").modal('show');
  
         });
              });
          &lt;/script&gt;
  </code></pre>
  
  <p>modal one!</p>
  
  <pre><code>&lt;a href="#myModal1" class="btn btn-lg btn-primary"&gt;Nieuwe taak toevoegen&lt;/a&gt;
                          &lt;div id="myModal1" class="modal fade"&gt;
                  &lt;div class="modal-dialog"&gt;
                      &lt;div class="modal-content"&gt;
                          &lt;div class="modal-header"&gt;
                              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                              &lt;h4 class="modal-title"&gt;Nieuwe taak toevoegen&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;form id="form1" action="&lt;?php $_SERVER['PHP_SELF'];?&gt;" method="POST"&gt;
                              &lt;td&gt;Naam voor afspraak:&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" name="afspraak"&gt;&lt;/td&gt;&lt;/tr&gt;
                              &lt;tr&gt;&lt;/tr&gt;
                              &lt;tr&gt;
                                &lt;td&gt;&lt;/br&gt;Omschrijving: &lt;/td&gt;
                                &lt;td&gt;&lt;textarea cols="34" rows="5" name="description"&gt;&lt;/textarea&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;&lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Datum:&lt;/td&gt;
                                          &lt;td&gt;
                                              &lt;select name="day"&gt;
                                                  &lt;?php 
                                                                  //Selecteerd als eerste de dag van vandaag
                                                      echo "&lt;option selected&gt;" .Date('d')."&lt;/option&gt;";
                                                          for($i = 1; $i &lt;=31; $i++)
                                                          {
                                                              echo '&lt;option value="'.$i.'"&gt;'.$i.'&lt;/option&gt;';
                                                          }
                                                          ?&gt;  
                                                      &lt;/select&gt;
                                                      &lt;select name="month"&gt;
                                                          &lt;?php   
                                                                  //Selecteerd als eerste de maand van vandaag
                                                              echo "&lt;option selected&gt;" .Date('m')."&lt;/option&gt;";
                                                                  for($i = 1; $i &lt;=12; $i++)
                                                                  {
                                                                      echo '&lt;option value="'.$i.'"&gt;'.$i.'&lt;/option&gt;';
                                                                  }
                                                          ?&gt;
                                                      &lt;/select&gt;
                                                      &lt;select name="year"&gt;
                                                          &lt;?php
                                                                  //Selecteerd als eerste de jaar van vandaag
                                                              echo "&lt;option selected&gt;" .Date('Y')."&lt;/option&gt;";                                                                
                                                                  for($i = date("Y"); $i &lt;= 2050; $i++)
                                                                  {
                                                                      echo '&lt;option value="'.$i.'"&gt;'.$i.'&lt;/option&gt;';
                                                                  }
                                                          ?&gt;
                                                      &lt;/select&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                              &lt;tr&gt;&lt;/tr&gt;
                                              &lt;tr&gt;
                                                  &lt;td&gt;Tijd: &lt;/td&gt;
                                                  &lt;td&gt;&lt;input type="time" name="tijd" value="&lt;?php echo date('H:i:s');?&gt;"&gt;&lt;/td&gt;
                                              &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;/div&gt;
  
                          &lt;div class="modal-footer"&gt;
                             &lt;!--- &lt;button type="submit" class="btn btn-default" data-dismiss="modal" value="Toevoegen" name="submit"&gt;Toevoegen&lt;/button&gt;---&gt;
                                                  &lt;td&gt;&lt;input type="submit" value="Toevoegen" name="submit"&gt;&lt;/td&gt;
                            &lt;!---  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;---&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; 
                  &lt;/form&gt;
  </code></pre>
  
  <p>and modal 2</p>
  
  <pre><code>echo "&lt;a href='#myModal2' class='btn btn-primary' id='test'&gt;$name&lt;/a&gt;
                                  &lt;div id='myModal2' class='modal fade'&gt;
                                      &lt;div class='modal-dialog'&gt;
                                          &lt;div class='modal-header'&gt;
                                              &lt;h4 class='modal-title'&gt;$name&lt;/h4&gt;
                                          &lt;/div&gt;
                                          &lt;div class='modal-body'&gt;
                                              &lt;p&gt;&lt;td&gt;Datum: $datum &lt;/br /&gt; Tijd: $tijd &lt;/br /&gt; Opdracht: $huiswerk&lt;/td&gt;
                                          &lt;/div&gt;
                                          &lt;div class='modal-footer'&gt;
                                              &lt;button type=button' class='btn btn-default' data-dismiss='modal'&gt;Sluiten&lt;/button&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;";
  </code></pre>
  
  <p>I'm thinking there is something wrong with the .btn, and that it'll only accept one btn. but I have no clue how to make it so I can use .btn multiple times.</p>
  
  <p>.btn2 does not work.</p>