Как я могу использовать один js-код шаблона django для разного контента

Я работаю над веб-приложением с использованием Django и столкнулся с одной проблемой, а именно: я написал один html шаблон в Django и в этом шаблоне я также написал код js для этого шаблона. Я хочу использовать этот js код для всех различных видов контента, который представлен с помощью этого шаблона перед пользователем. но этот js код не работает для всех видов контента одинаково.

Проблема вкратце

Я делаю коммерческое веб-приложение для проектов типа amazon.in и flipkart.com и я написал шаблон для страницы просмотра продукта для всех видов продукта, который отображается с помощью этого шаблона. В шаблоне страницы просмотра товара я сделал кнопку. Кнопка называется Добавить в корзину и я написал JavaScript код в этом шаблоне для кнопки Добавить в корзину, чтобы сохранить товар в корзину, когда пользователь нажимает на кнопку. Я создал корзину, используя LocalStorage, и буду хранить в ней товары. Но проблема в том, что когда я инициализирую свой сайт и нажимаю на товар и перехожу на страницу просмотра товара и нажимаю на Add to Cart и после нажатия на кнопку js код будет выполнен успешно!!! и товар будет сохранен в localStorage браузера. но когда я возвращаюсь на страницу списка товаров и нажимаю на другой товар и перехожу на страницу просмотра товара, а затем нажимаю на кнопку Add to Cart Button, то ничего не происходит и появляется ошибка Uncaught Type Error и товар не попадает в корзину. но когда я очищаю корзину (localStorage) с помощью localStorage.clear() и когда она пуста, товар отображается в localStorage после нажатия на кнопку Добавить в корзину. И когда один продукт находится в списке. он показывает ту же ошибку снова для другого продукта. Так как я могу решить эту проблему и получить желаемый результат.

если вы знаете, как это можно решить, пожалуйста, поделитесь со мной и помогите мне, а также сообщите, какую ошибку я делаю в этом.

Мой код шаблона просмотра товара находится здесь с расширенным js кодом

Мой код urls.py здесь

from django.urls import path,include
from . import views
urlpatterns = [
    # path('admin/', admin.site.urls),
    path('',views.CategoryPage,name='MenuCategoryPage'),
    path('Category/<str:Variety_Name>',views.Category_Items,name='CategoryItems')

Мой views.py кода Django находится здесь

from django.shortcuts import render
from django.http import HttpResponse
from .models import Varieties,CategoryItems
def Category_Items(request,Variety_Name):
    print(f"variety name {Variety_Name}")
    post=CategoryItems.objects.filter(Item_Category=Variety_Name)
    Category=None
    print(len(post))
    if len(post) >= 1:
        Category=post[0]
    content={'Content':post,'Category':Category}


    return render(request,'MenuCategory/Product_List.html',content)

Мой код models.py находится здесь

from django.db import models

# Create your models here.
class Varieties(models.Model):
    VarietyID=models.AutoField(primary_key=True)
    Variety_Name=models.CharField(max_length=50,default='Variety name should be within 50 characters.')
    Variety_Image=models.ImageField(default='')

    def __str__(self):
        return self.Variety_Name
class CategoryItems(models.Model):
    Item_ID=models.AutoField(primary_key=True)
    Item_Category=models.CharField(max_length=50,default="Variety Name and Category Name must be same.")
    Item_SubCategory=models.CharField(max_length=50,default="SubCategory Name")
    Item_Image=models.ImageField(default='')
    Item_Name=models.CharField(max_length=50,default='Ex: Paneer Pratha')
    Item_Price=models.IntegerField()
    Item_Description=models.CharField(max_length=1000,default='Write Something about speciality of the Product.')
    def __str__(self):
        return f"{self.Item_Name} - {self.Item_Category}"

Ошибка, возникающая в консоли, когда я хочу добавить товар в корзину, когда в localStorage уже есть один товар.

Но когда localStorage пуст, предмет сохраняется в нем успешно.

 for (let item in Cart) {
        console.log(item)
        document.getElementById('btnspan' + item).innerHTML = `<button id="minus${item}" class="btn btn-primary minus">-</button><span id="val${item}">${Cart[item][0]}</span><button id="plus${item}" class="btn btn-primary plus">+</button>`
    }

let btns = document.getElementsByClassName('{{Category.Item_Category}}CartButton');
btns = Array.from(btns);

for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
        var idstr = this.id.toString();
        if (Cart[idstr] != undefined) {
            Cart[idstr][0] = Cart[idstr][0] + 1;

        } else {
            name = document.getElementById("nameby" + idstr).innerHTML;
            price = document.getElementById("PriceOf" + idstr).innerHTML;
            quantity = 1;
            Cart[idstr] = [quantity, name, parseInt(price)];
        }
        updateCart(Cart)
    })
}

function updateCart(Cart) {
for (let item in Cart) {
if("{{Category.Item_Category}}" == `${item}`.slice(0,"{{Category.Item_Category}}".length)){
        document.getElementById('btnspan' + item).innerHTML = `<button id="minus${item}" class="btn btn-primary minus">-</button><span id="val${item}">${Cart[item][0]}</span><button id="plus${item}" class="btn btn-primary plus">+</button>`
    }
}
    localStorage.setItem('Cart', JSON.stringify(Cart))
    console.log(localStorage.getItem('Cart'))
}

if("{{Category.Item_Category}}" == `${item}`.slice(0,"{{Category.Item_Category}}".length))