смена картинки по клику
 

Добрый день!
Прошу помочь советом.

У меня есть 2 блока на одной странице, где отображаются картинки.

<img id="111" src="images/eggs-net/egg-net-5.jpg" width="400" alt="" />

<img id="222" src="images/eggs-net/egg-net-6.jpg" width="400" alt="" >

И к ним написаны обработчики для смены картинки. По отдельности они работают, а вместе не хотят. Подскажите как коды сделать уникальными, чтобы id="111" менял свой набор картинок, а id="222" менял свой набор?

<script language="javascript">
var image = document.getElementById("111");
image.addEventListener("click", function(){
   if (image.getAttribute("src") == "images/eggs-net/egg-net-5.jpg"){
      image.src = "images/eggs-net/egg-net-5-2.jpg"}
   else{
      image.src = "images/eggs-net/egg-net-5.jpg"}
});
</script>

<script language="javascript">
var image = document.getElementById("222");
image.addEventListener("click", function(){
   if (image.getAttribute("src") == "images/eggs-net/egg-net-6.jpg"){
      image.src = "images/eggs-net/egg-net-6-2.jpg"}
   else{
      image.src = "images/eggs-net/egg-net-6.jpg"}
});
</script>

Например так...

<img src='https://javascript.ru/forum/images/smilies/angry.gif' data-src='https://javascript.ru/forum/images/smilies/smile.gif' />
<img src='https://javascript.ru/forum/images/smilies/sad.gif' data-src='https://javascript.ru/forum/images/smilies/tongue.gif' />


<script>
document.addEventListener('click', e => {
	const o = e.target
	if (o.tagName != 'IMG') return
	const v = o.dataset.src
	o.dataset.src = o.src
	o.src = v
})
</script>

Спасибо, Вопрос закрыт)