How to have different lightbox for different object
<p>Hi guys might be a very simple question, but i am playing around with a lightbox found <a href="http://codepen.io/cssjockey/pen/qsCkF" rel="nofollow">here</a>. I got it on my site and its working, however i want to use it on a different page, but i cant, so i am guesing i might need to change the ID about or something? i am not to sure, </p>

<p>HTML: </p>

<pre><code>&lt;a id="show-panel" href="#"&gt;Show Panel&lt;/a&gt;

&lt;div id="lightbox-panel"&gt;
    &lt;h2&gt;Lightbox Panel&lt;/h2&gt;
    &lt;p&gt;You can add any valid content here.&lt;/p&gt;
    &lt;p align="center"&gt;&lt;a id="close-panel" href="#"&gt;Close this window&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;!-- /lightbox-panel --&gt;
&lt;div id="lightbox"&gt;&lt;/div&gt;
&lt;!-- /lightbox --&gt;
</code></pre>

<p>CSS:</p>

<pre><code>body{
  margin:150px 0 0 0;
  text-align:center;
  background: #f1e7b0;
}
h2{
  font-size: 32px;
}
a{
  text-decoration: none;
  color: #222222;
  font-size: 18px;
}

/* Lightbox background */
#lightbox {
  display:none;
  background: rgba(0,0,0,0.8);
  position:absolute;
  top:0px;
  left:0px;
  min-width:100%;
  min-height:100%;
  z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
  display:none;
  position:fixed;
  top:100px;
  left:50%;
  margin-left:-200px;
  width:400px;
  background:#FFFFFF;
  padding:10px 15px 10px 15px;
  border:2px solid #CCCCCC;
  z-index:1001;
}
</code></pre>

<p>So just to just fully be clear, i got it working for a one, but want to use the effect on anther object, i aien't to sure those how to change it so i can have diffrent content in the other one. </p>

<p>Thanks </p>