title: Two different Bootstrap modal windows...both opening at once
body: <p>I've found several similar questions, but none seem to quite give the answer I need. I have a page that required two different modal windows. One opens by clicking any one of 8 buttons (the modal content is the samen no matter which you click), while the other is a simple "contact info" modal that opens when clicking a standard text link. The problem is that with this code, both modal windows open at the same time, one on top of the other, no matter which button/link you click. I need them to open separately, independent of each other.</p>
  
  <p>Here's the scripts:</p>
  
  <pre><code>      &lt;!--***********
  MODAL WINDOW - SELECT TEMPLATE POPUP
   ***********--&gt;
    &lt;script&gt;$('.selectLink').click(function() {
      $('.modal')
          .prop('class', 'modal fade') // revert to default
          .addClass( $(this).data('direction') );
      $('.modal').modal('show');
  });&lt;/script&gt;
  &lt;!--***********
  MODAL WINDOW - SELECT TEMPLATE POPUP
   ***********--&gt;
  
    &lt;!--***********
  MODAL WINDOW - HELP POPUP
   ***********--&gt;
    &lt;script&gt;$('#helpLink').click(function() {
      $('.modal')
          .prop('class', 'modal fade') // revert to default
          .addClass( $(this).data('direction') );
      $('.modal').modal('show');
  });&lt;/script&gt;
  &lt;!--***********
  MODAL WINDOW - HELP POPUP
   ***********--&gt;
  </code></pre>
  
  <p>and the HTML:</p>
  
  <pre><code>&lt;!-- MODAL WINDOW - SELECT TEMPLATE POPUP --&gt;                  
      &lt;div class="modal fade" class="selectLink" role="dialog"&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"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
              &lt;h2 class="modal-title"&gt;Customize Your Email!&lt;/h4&gt;
            &lt;/div&gt;
    &lt;div class="modal-body"&gt;
          ...
   &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
        &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;       
  &lt;!-- MODAL WINDOW - SELECT TEMPLATE POPUP --&gt; 
  
  
          &lt;!-- MODAL WINDOW - HELP POPUP   --&gt;                
      &lt;div id="helpLink" 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"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
              &lt;h2 class="modal-title"&gt;Contact Us for Assistance&lt;/h4&gt;
            &lt;/div&gt;
    &lt;div class="modal-body"&gt;
          ...          
   &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
        &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;       
  &lt;!-- MODAL WINDOW - HELP POPUP --&gt;  
  </code></pre>
  
  <p>I thought the issue might be that I'm using a class instead of an id for the "selectLink" modal, but before I added the second modal (with the id), that worked fine. I don't know a lot about jquery, so maybe I'm missing something in that section.</p>
  
  <p>I've looked at several questions on SO, but none have quite given the necessary answer. </p>