Колеги имам нужда от малко помощ с личен проект. Опитвам се да си направя галерия, в която като кликна на снимка, тя да се увеличава и съответно намалява при втори клик. До тук добре - измислих функцията и тя работи коректно, но тук дойде друг проблем: Как да достъпя само една от картинкит а не всичките? В момента като кликна на картинка - всички се увеличават и намаляват едновременно, а аз искам само тази на която съм кликнал.

Примерен html: 

<div class="indoors">
<div>
<a href="#"><img src="images/1.jpg" id="zoomer"  onclick="zoomIt"> </a>
<p>каталожен номер</p>
</div>
<div>
<a href="#"><img src="images/2.jpg" id="zoomer"  onclick="zoomIt()"> </a>
<p>каталожен номер</p>
</div>
</div

JavaScript функция:

function zoomIt(){
var image = document.getElementById('zoomer');
if (image.hasAttribute('class', 'expanded')) {
image.removeAttribute('class', 'expanded');

}else {
image.setAttribute('class', 'expanded');
}

}

Някакви идеи? Къде бъркам (освен, че всички имат едно и също id, но не се сещам по какъв друг начин да ги достъпя)? Има ли по лесен начин?