Как сократить код?

Заменить id на data-атрибут:

$('[data-index]').click(function() {
  $('#main__display').html(`<img src="${collect[this.dataset.index]}">`);
});

Вариантов на самом деле хоть отбавляй.
Ну, начнём с того, что использовать селектор по ID это контрпродуктивно и ведёт к хаосу и разбуханию.
Судя по Вашему коду, Вы хотите чтобы каждая следующая кнопка показывала соответствующую по индексу картинку из коллекции.
В таком случае, можно опираться на индексы.
То есть:
1) назначаем кнопкам уникальный класс
2) матчимся в селекторе на этот класс,
3) назначаем обработчик клика,
4) в обработчике клика получаем индекс данной кнопки,
5) подставляем индекс в коллекцию, чтобы вытащить нужный путь до картинки.
6) Профит.

Но, выше уже сказали про делегирование. Чем оно лучше чем то , что я выше описал? У вас всего один обработчик, на один элемент - контейнер кнопок. Так как события всплывают, то можно перехватывать на родительском элементе всплывшее событие клика и запускать вышеуказанную обработку. Таким образом, один обработчик лучше чем много, согласитесь :-) И не нужно париться чтобы довешивать обработчики на динамически сгенерирванные кнопки.
Итак, пример:

HTML:

<div id="main__display"></div>
<div class="images-controls">
    <button type="button" class="images-controls__btn">1</button>
    <button type="button" class="images-controls__btn">2</button>
    <button type="button" class="images-controls__btn">3</button>
    <button type="button" class="images-controls__btn">4</button>
</div>

JS:

var collection = [
    "https://via.placeholder.com/100",
    "https://via.placeholder.com/200",
    "https://via.placeholder.com/300",
    "https://via.placeholder.com/400",
]

// Добавляем обработчик на контейнер кнопок
$('.images-controls').on('click', function(evt){
    // evt - Объект события.
    // Элемент, на котором произошёл клик:
    var target = evt.target; 

    // проверяем, есть ли у этого элемента класс, присущий нашим кнопкам:
    if(target.classList.contains('images-controls__btn')){
        var btnIndex = $('.images-controls__btn').index(target); // Находим индекс этой кнопки из массива всех кнопок.
        // Рендерим картинку, извлекая путь до картинки по индексу кнопки из коллекции
        $("#main__display").html(
            '<img src="' + collection[btnIndex] + '">'
        )
    }        
});