title: Using Multiple Id tags to active a close span element
body: <p>In the following code, I have multiple modal image elements on the page. For each of these elements I am using an "X" close span element. </p>
  
  <p>First Modal:</p>
  
  <pre><code>&lt;div id="myModal" class="modal"&gt;
  &lt;span class="close"&gt;×&lt;/span&gt;
  &lt;div id="carousel-example-generic" class="carousel slide" &gt;  @*data-ride="carousel"*@
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
              &lt;img class="img-responsive  center-block" src="foo" alt="Navigation"&gt;
              &lt;div class="carousel-caption"&gt;
              Caption Here
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img class="img-responsive  center-block" src="foo" alt=""&gt;
              &lt;div class="carousel-caption"&gt;
                  Caption Here
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img class="img-responsive  center-block" src="foo" alt=""&gt;
              &lt;div class="carousel-caption"&gt;
                  Caption Here
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Controls --&gt;
      &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Second Modal:</p>
  
  <pre><code>&lt;div id="myModal2" class="modal"&gt;
  &lt;span class="close"&gt;×&lt;/span&gt;
  &lt;img class="modal-content" id="img02" src="~/Images/Site/banner.jpg" alt="Completion Certifiate for Compliance Training"&gt;
  &lt;div id="caption"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Javascript:</p>
  
  <pre><code>var modal = document.getElementById('myModal');
  
  var img = document.getElementById('myImg');
  var modalImg = document.getElementById("img01");
  
  
  img.onclick = function () {
      modal.style.display = "block";
  
  }
  
  var span = document.getElementsByClassName("close")[0];
  
  span.onclick = function () {
  modal.style.display = "none";
  }
  
  
  
  var modal2 = document.getElementById('myModal2');
  
  var img2 = document.getElementById('myImg2');
  var modalImg2 = document.getElementById("img02");
  
  
  img2.onclick = function () {
      modal2.style.display = "block";
  
  }
  var span = document.getElementsByClassName("close")[0];
  
  span.onclick = function () {
  
      modal2.style.display = "none";
  }
  </code></pre>
  
  <p>The problem I am having is that when I try to assign invidual  close functions the first will work, but the second will not. I need both to act as Close elements on their respective Modals. Any help is greatly appreciated</p>