Twitter Bootstrap - Clicking images to show modals, with multiple images and multiple modals.

Question

I have 9 images and each one needs to display a different modal. No matter which picture I click on, it only shows the first modal. I can see that they both have the same IDs and that's probably an error on my part, but I'm not that great with javascript either. All and all, click on one picture, show Modal A and its content, click another picture, show Modal B and its different content.

All I have is:

    <script type="text/javascript">$('#myModal').modal('show')</script>

      <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                <a href="sit1e" target="_blank">
                  <img src="1.png" class="img-responsive" />
                </a>
                <a href="site2" target="_blank">
                  <img src="2.png" class="img-responsive" />
                </a>
                 <div class="icons">
                <a href="sound"  target="_blank">
                  <img src="audio.png" class="img-responsive" />
                </a>
                <a href="print" target="_blank">
                  <img src="print.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">                    
                  <img src="info.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">
                  <img src="link.png" class="img-responsive" />
                </a>
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>

      <div class="col-md-4 col-sm-4 col-xs-12">
          <a href="#myModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#largeModal">
            <img src="2.jpg" class="img-responsive"/>
          </a>
      </div>

               <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                <a href="sit1e" target="_blank">
                  <img src="1.png" class="img-responsive" />
                </a>
                <a href="site2" target="_blank">
                  <img src="2.png" class="img-responsive" />
                </a>
                 <div class="icons">
                <a href="sound"  target="_blank">
                  <img src="audio.png" class="img-responsive" />
                </a>
                <a href="print" target="_blank">
                  <img src="print.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">                    
                  <img src="info.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">
                  <img src="link.png" class="img-responsive" />
                </a>
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>

Answer 1

      <div class="col-md-4 col-sm-4 col-xs-12">
          <a href="#myModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#largeModal">
            First Modal
          </a>
          <a href="#smallModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#smallModal">
            Second Modal
          </a>
      </div>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                FIRST MODAL CONTENT
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                SECOND MODAL CONTENT
                <a href="" target="_blank">
                  <img src="link.png" class="img-responsive" />
                </a>
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>