Есть код галереи :
<div id="gallery" class="gallerytest">
<div id="thumbs" class="thumbsimg">
<div class="thumbsimgg">
<img src="https://avatars.mds.yandex.net/get-zen_doc/241236/pub_5cee555a14255600afbfddc6_5cf7bbf79511bd00afb4eba1/scale_1200" alt="1234">
</div>
<div class="thumbsimgg">
<img src="https://i.pinimg.com/originals/f5/bc/60/f5bc6033d75ec2db977bdf2bffcb6991.png" alt="1235">
</div>
<div class="thumbsimgg">
<img src="https://upload.wikimedia.org/wikipedia/ru/9/99/Jerry_Mouse.jpg" alt="1236">
</div>
<div class="thumbsimgg">
<img src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="1236">
</div>
</div>
<div id="panel">
<img id="largeImage" src="https://i.ytimg.com/vi/IEM9Q2fdHA0/maxresdefault.jpg" alt="123">
</div>
</div>
.gallerytest {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.thumbsimg {
flex-direction: column;
}
.thumbsimgg img {
width: 100px;
height: 100px;
}
#thumbs {
padding-top: 10px;
overflow: hidden;
}
#thumbs img,
#largeImage {
padding: 4px;
cursor: pointer;
}
#largeImage {
margin-left: 35px;
margin-top: 30px;
width: 300px;
height: 300px;
}
#thumbs img {
margin-right: 6px;
}
$('#thumbs').delegate('img', 'click', function() {
$('#largeImage').attr('src', $(this).attr('src'));
});
На одну галерею все работает прекрасно, но если попытаться вставить еще одну такую же галерею, js код на вторую не срабатывает. Что нужно поправить, чтобы js срабатывал на все однотипные галереи? Менял id на классы, срабатывает сразу на всех галереях. https://jsfiddle.net/bqg0uh6z/ ссылка на код с несколькими галереями.