Your issue is related to the condition if 'key < 13' in your code, which specifies that the container should be 'listCarts' only when key is less than 13. The result is that products with keys greater than 7 won't be added to your cart, I have modified your code a little which returns all 13 products -
function addToCart(key) {
console.log('Key value:', key);
let item = list.querySelectorAll('.item')[key - 1];
let name = item.querySelector('.title').textContent;
let priceText = item.querySelector('.price').textContent;
let price = parseFloat(priceText.replace(/[^0-9.]/g, ''));
let image = item.querySelector('img').src;
console.log(image);
let container = listCarts;
console.log('Before addToCart:', listCarts);
if (container[key - 1] == null) {
container[key - 1] = {
name: name,
basePrice: price,
price: price,
quantity: 1,
image: image,
};
} else {
container[key - 1].quantity++;
container[key - 1].price = container[key - 1].basePrice * container[key - 1].quantity;
}
reloadCart();
}
You can see it working in this fiddle -
Show all 13 products[
^]