Сохранение товаров в localstorage

У меня есть две страницы html: products(1) и card_products(2) к (1) подключен js файл

var buyButtons = document.querySelectorAll('.buyButton');

buyButtons.forEach(function (buyButton) {
    buyButton.addEventListener('click', function () {
        var productContainer = this.parentNode;
        var productName = productContainer.querySelector('.name_product').innerText;
        var productPrice = productContainer.querySelector('.price_product').innerText;
        var productImage = productContainer.querySelector('.image_product').getAttribute('src');
        var productQuantity = 1;

        var productData = {
            name: productName,
            price: productPrice,
            image: productImage,
            quantity: productQuantity,
        };

        var cart = JSON.parse(localStorage.getItem('cart')) || [];
        var found = false;

        cart.forEach((item) => {
            if (item.name === productData.name) {
                item.quantity += productData.quantity;
                found = true;
                alert("Есть совпадение");
            }
        });

        if (!found) {
            cart.push(productData);
        }

        localStorage.setItem('cart', JSON.stringify(cart));
    });
});

Все сохраняется корректно, как вы видите если добавить такой же товар снова то идет увеличение количества. Далее в (2) js файл

var count = 1;

var counterElement = document.getElementById('counter');

var positive = document.getElementById('Button_1');
positive.addEventListener('click', function () {
    count += 1;
    counterElement.innerText = count;

});
var negative = document.getElementById('Button_2');
negative.addEventListener('click', function () {
    if (count - 1 == 0) {
        alert('Число должно быть больше нуля.');
    } else {
        count -= 1;
        counterElement.innerText = count;
    }
});

var buyButtons = document.querySelectorAll('.buyButton');


buyButtons.forEach(function (buyButton) {
    buyButton.addEventListener('click', function () {

     var productContainer = this.parentNode;
        var productName = productContainer.querySelector('.name_card').innerText;
        var productPrice = productContainer.querySelector('.price_card').innerText;
        var productImage = productContainer.querySelector('.image_card').getAttribute('src');

        var productData = {
            name: productName,
            price: productPrice,
            image: productImage,
            quantity: count,
        }; 

        var cart = JSON.parse(localStorage.getItem('cart')) || [];

        var found = false;

        cart.forEach((item) => {
            console.log(item.name);
            console.log(productData.name);

            if (item.name === productData.name) {
                item.quantity += count;
                found = true;
                alert("Есть совпадение");
            }
        });

        if (!found) {
            cart.push(productData);
        } 

        localStorage.setItem('cart', JSON.stringify(cart));
        
    });
});

Все то же самое но есть кнопка увеличения количества все работает корректно но циклом forEach при поиске такого же названия код находит совпадение лишь если я уже раннее добавил объект конкретно с этой страницы но если я его добавил в (1) странице совпадения не находит и добавляет новый объект(также работает и наоборот). Смотрел через консоль может названия немного отличаются или тип разный но нет идеально совпадают. Возможно это как то связано с тем что к (1) подключен первый js файл без второго а ко (2) подключен второй js файл без первого. Также не знаю важно или нет у обоих функция:

document.addEventListener('DOMContentLoaded', function ()

Как вы видите просто добавляется новый объект: