Не получается через JS менять ссылку на скачивания файла

Столкнулся с проблемой. При добавлении следующего кода:

 const viewbutton = document.querySelectorAll('.project');
                    const overlay = document.querySelector('.overlay');
                    const overlayImage = document.querySelector('.overlay-inner img');

                    const Close = document.querySelector('.close-button');

                    function open(e){
                        overlay.classList.add('open');
                        const src = e.currentTarget.querySelector('img').src;
                        overlayImage.src = src ; 
                    }

                    function close(){
                        overlay.classList.remove('open');
                    }
                    viewbutton.forEach(button => button.addEventListener('click', open));

в этот код:

$(document).ready(function() {
let id_img, title_img, i,
    img_glav_page = [
        {name: 'Хитрая ухмылка - 1', href: 'im/1.jpg'},
        {name: 'Хитрая ухмылка - 2', href: 'im/2.jpg'},
        {name: 'Хитрая ухмылка - 3', href: 'im/3.jpg'},
        {name: 'Хитрая ухмылка - 4', href: 'im/4.jpg'},
        {name: 'Хитрая ухмылка - 5', href: 'im/5.jpg'},            
    ];

img_glav_page.forEach(item => {


    let template = `
            <div class="project portfolio" id="project"><img class="project-image" src="${item.href}">
            <div class="grid-overlay"><div class="viewbutton"><i class="fas fa-search-plus"></i></div></div></div><div class="overlay">
            <div class="close-button"><i class="fas fa-times"></i></div><div class="overlay-inner"><div class="gallary-img">
            /div><img class="project-imagec_i" src="${item.href}"><div class="gallary-opis"><div class="gallary-title">
            <div class="gallary-title_i">${item.name}</div></div><div class="save_i" title="choose your destiny">
            <a class="save_i" href="${item.href}" download=""><i class="fas save-button fa-arrow-down"></i></a></div></div></div>
            `;


    $('.wrp-1').append(template);

    });    

});  

ссылка на скачивание ломается - <a class="save_i" href="${item.href}" download="">

Т.е. картинка 1.jpg будет иметь путь скачивания 1.jpg, но и картинка 2.jpg будет иметь путь скачивания 1.jpg.

При этом если заменить путь к картинке {name: 'Хитрая ухмылка - 1', href: 'im/1.jpg!!!'}, {name: 'Хитрая ухмылка - 2', href: 'im/2.jpg'}, на {name: 'Хитрая ухмылка - 1', href: 'im/2.jpg!!!'}, {name: 'Хитрая ухмылка - 2', href: 'im/2.jpg'},, то у всех остальных будет открываться их изображение, но скачивание будет то, которое указано в самом начале мг. массива.

Данный код нужен, чтобы я мог открыть картинку большего размера, а-ля галерея в вк. Видно, что данный код немного конфликтует, ибо без него, я напомню, 2.jpg скачивается как 2.jpg.

Как мне решить данную проблему? Спасибо за помощь!)

P.s. я новичок в JS :3