title: How do I get two modal dialogues in one page to work?
body: <p>I have two modal dialogues in my webpage, using Twitter-bootstrap, but only one of them works.</p>
  
  <p>Here is the code:</p>
  
  
  
  <pre><code>&lt;a href="#format" role="button" class="btn btn-info" data-toggle="format"&gt;Phone and Email&lt;/a&gt;
  &lt;div id="format" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="format" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
      &lt;!--This needs a fancy phone icon and so does the button.--&gt;
      &lt;img src="img/numberheader.png" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
      &lt;p&gt;
      &lt;h4&gt;Office:&lt;/h4&gt;
      123 4567&lt;br&gt;
      &lt;h4&gt;Programme Manager:&lt;/h4&gt;
      765 4321&lt;br&gt;
      &lt;hr&gt;
      &lt;img src="img/emailheader.png" alt=""&gt;
      &lt;h4&gt;Email us&lt;/h4&gt;Iremovedthemailaddresses&lt;br&gt;
      &lt;a href="Iremovedthemailaddresses" class="btn-primary btn-small"&gt;Click Here To Email Us&lt;/a&gt;
      &lt;br&gt;
      &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
      &lt;button class="btn btn-info" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;a href="#myModal" role="button" class="btn btn-info" data-toggle="modal"&gt;Phone and Email&lt;/a&gt;
  &lt;div id="myModal" class="modal hide fade" tabindex="-1"
  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-header"&gt;
  &lt;!--This needs a fancy phone icon and so does the button.--&gt;
  &lt;img src="img/numberheader.png" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
  &lt;p&gt;
  &lt;h4&gt;Office:&lt;/h4&gt;
  123 4567&lt;br&gt;
  &lt;h4&gt;Programme Manager:&lt;/h4&gt;
  765 4321&lt;br&gt;
  &lt;hr&gt;
  &lt;img src="img/emailheader.png" alt=""&gt;
  &lt;h4&gt;Email us&lt;/h4&gt;Iremovedthemailaddresses&lt;br&gt;
  &lt;a href="Iremovedthemailaddresses" class="btn-primary btn-small"&gt;Click Here To Email Us&lt;/a&gt;
  &lt;br&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
  &lt;button class="btn btn-info" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The content of the two modals has not been separated into what it's meant to be yet, it's just proof of concept at this point (so ignore the content).</p>
  
  <p>However, it only works for the second one, not the first. What can I do to make both modals work?</p>