title: Correctly creating multiple instances of lightbox for website
body: <p>I am seeking to use a jQuery / JS lightbox I found across a 1 page website, I'd like to use it 7 times to hold 7 unique sets of content but I am failing to implement it correctly for the other 6 instances.</p>
  
  <pre><code>$(document).ready(function() {
      var lightBox = $('#lightbox'),
      lightBoxContent = $('#lb-content');
  
  var positionLightbox = function() {
      var veiwWidth = $(window).width(),
          lbContentMargin = (veiwWidth / 2) - 400,
          lbContent = $('#lb-content');
  
      lbContent.css({
          'left' : lbContentMargin,
          'top' : $(window).scrollTop() - 150 + 'px'
      });
  };
  
  $('#search-submit').click(function() {
      lightBox.fadeIn(function() {
          lightBoxContent.show();                               
      });
      positionLightbox();
  });
  
  $('#lb-close').click(function() {
      lightBox.hide();
      lightBoxContent.hide();
      });
  });
  </code></pre>
  
  <p><strong>Mark-Up:</strong></p>
  
  <pre><code>&lt;!-- light box --&gt;
  
                  &lt;div id="lightbox"&gt;&lt;/div&gt;
                  &lt;div id="lb-content"&gt;
                  &lt;span id="lb-close"&gt;x&lt;/span&gt;
                  &lt;h1&gt;More content here.&lt;/h1&gt;&lt;br&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec commodo justo. Suspendisse vel facilisis enim. Nulla lorem ante, auctor et malesuada ac, porttitor in lectus. Fusce congue pharetra tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam dapibus nec neque ut accumsan.&lt;/p&gt;   
  
                  &lt;/div&gt;
  
  &lt;!-- // light box --&gt;
  </code></pre>
  
  <p>Duplicating the code in 6 new instances didn't work either.</p>
  
  <pre><code>$(document).ready(function() {
      var lightBox = $('#lightbox2'),
      lightBoxContent = $('#lb-content2');
  
  var positionLightbox = function() {
      var veiwWidth = $(window).width(),
          lbContentMargin = (veiwWidth / 2) - 400 + 'px',
          lbContent = $('#lb-content2');
  
      lbContent.css({
          'left' : lbContentMargin,
          'top' : $(window).scrollTop() - 350 + 'px'
      });
  };
  
  $('#search-submit2').click(function() {
      lightBox.fadeIn(function() {
          lightBoxContent.show();                               
      });
      positionLightbox();
  });
  
  $('#lb-close2').click(function() {
      lightBox.hide();
      lightBoxContent.hide();
      });
  });
  </code></pre>