Несколько лайтбоксов на одной странице с использованием HTML и CSS

У меня есть несколько фотографий предварительного просмотра на одной странице, и я хочу, чтобы на каждом снимке предварительного просмотра был свой собственный лайтбокс, который увеличивает фотографию. Но когда я открываю вторую фотографию на странице, изображение в лайтбоксе - это большая версия первого изображения на странице. Я использую HTML и CSS с минимальной java

Это мой код для HTML

<div id="graphic">
<h2><span>Graphic Art</span></h2>
<!--Below is the code for the clickable Sloth Photo with an opening Light Box-->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="images/graphicart/sloth-small.jpg" width="200px"></a></p>
<div id="light" class="white_content"><img src="images/graphicart/sloth-large.jpg" width="600px">
<br>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</div>

<div id="Separator">
</div>

<div id="Photo1">
<h2><span>Photography<span></h2>
<!--Below is the code for the clickable photos with an opening Light Box-->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="images/photography/art-small.jpg" width="200px"></a></p>
<div id="light" class="white_content"><img src="images/photography/art-large.jpg" width="600px">
<br>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</div>

И соответствующий CSS:

.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 200%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: absolute;
top: 15%;
left: 20%;
width: 54%;
height: 75%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}