JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pic"><!-- пусть будет 2 фото по ним совершается клик.Его нужно отследить-->
			<img src="img/img-1.jpg" width="100px">
			<img src="img/bg.jpg" width="100px">
</div>
    
    
    <!-- в этот блок вставляется картинка -->
    <div id="image" class="image"><!-- задний фон -->
			<div class="inner"> <!--в дальнейшем потребуется делать клик влево вправо. нужна обертка -->
				<img><!-- сюда вставляется src class width -->
			</div>
		</div>

JavaScript

var cntr = document.getElementById('image');
			inner = cntr.getElementsByClassName('inner')[0],
			img = inner.getElementsByTagName('img')[0];
	
[...document.querySelectorAll('#pic img')].forEach(item => {
  item.addEventListener('click', (e) => { //вешаю обраотчик, но можно ли по другому? Например img.onclick = function(){} ?

    src = (e.currentTarget.getAttribute("src"));//Я так понял это цель src?	
	//
	img.setAttribute('src',src);//устанавливаю атрибут с src по которой был клик
	img.classList.add('is-open');//добавляю
	//
	cntr.classList.add('is-show');//добавляю класс
	document.body.style.overflow = 'hidden';//тут все понятно
  });
});
//закрыть я пока что повесил на весь блок, уверяю, это временно
cntr.onclick = function()
{
	cntr.classList.remove('is-show');//Убираю класс, чтобы скрыть
	img.classList.remove('is-open');//тоже самое для красоты + анимации
	document.body.removeAttribute('style');//тут все понятно
}