Заменить id на data-атрибут:
id="0" --->
data-index="0".
Нет необходимости каждый раз создавать картинку, можно перезаписывать src существующей.
Как добраться до картинки, откуда взять для неё src:
const imgSelector = '#main__display img';
const key = 'index';
const attr = `data-${key}`;
const buttonSelector = `[${attr}]`;
Как достать src, имея на руках элемент с индексом:
const getSrc = el => collect[
$(el).data(key)
// или
$(el).attr(attr)
// или
el.dataset[key]
// или
el.getAttribute(attr)
// или
el.attributes[attr].value
];
Слушаем клики, достаём src, назначаем картинке:
$(buttonSelector).click(function(e) {
$(imgSelector).attr('src', getSrc(this));
});
// или
$(document).on('click', buttonSelector, e => {
$(imgSelector).prop('src', getSrc(e.currentTarget));
});
// или
document.querySelectorAll(buttonSelector).forEach(function(n) {
n.addEventListener('click', this);
}, function(e) {
this.setAttribute('src', getSrc(e.currentTarget));
}.bind(document.querySelector(imgSelector)));
// или
document.addEventListener('click', ({ target: t }) => {
if (t = t.closest(buttonSelector)) {
document.querySelector(imgSelector).src = getSrc(t);
}
});
