I want to change popover content after a click to show cart items.

I want to change popover content after a click to show cart items. Debug the code. The popover is still saying title: “Your Cart” and content: “Hello”. I don’t know how to fix it. I am currently working on a django project and facing an issue with dynamically changing the content of a popover after a click event. The popover is meant to display the items in the user’s shopping cart.

{% load static %}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Forsale</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href={% static 'shop/style.css' %}>
    <script src="https://code.jquery.com/jquery-3.7.1.js"
        integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">

        <div class="row">
            <div class="col-md-12">

                <nav class="navbar navbar-expand-lg bg-body-tertiary">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="#">Navbar</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                            data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                            aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNav">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Features</a>
                                </li>
                                <li class="nav-item">
                                    <button id="cart-link" type="button" class="btn btn-secondary"
                                        data-bs-toggle="popover" data-bs-trigger="focus"
                                        data-bs-title="Dismissible popover"
                                        data-bs-content="It's very engaging. Right?">
                                        Cart
                                    </button>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <form class="card card-sm">
                    <div class="card-body row no-gytters align-items-center">
                        <div class="col">
                            <input class="form-control" type="search" name="item_name"
                                placeholder="Search for Products">
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-success" type="submit">Search</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            {% for product in product_objects %}
            <div class="col-md-3">
                <div class="card">
                    <img src={{product.image}} alt="" class="card-img-top">
                    <div class="card-body">
                        <div id="prod-name-{{product.id}}" class="card-title">
                            {{product.title}}
                        </div>
                        <div class="card-text">
                            Rs. {{product.price}}
                        </div>

                        <a href={% url 'detail' product.id %} class="btn btn-info">View</a>
                        <button id={{product.id}} class="btn btn-warning atc">Add to Cart</button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="row">
            <div class="col-md-3 offset-md-4">
                <ul class="pagination">
                    {% if product_objects.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{product_objects.previous_page_number}}">Prev</a>
                    </li>
                    {% endif %}

                    <li class="page-item active">
                        <a class="page-link" href="?page={{product_objects.number}}">Current</a>
                    </li>


                    {% if product_objects.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{product_objects.next_page_number}}">Next</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        if (localStorage.getItem('cart') == null) {
            var cart = {};
            document.getElementById('cart-link').innerHTML = "Cart (0)"
        }
        else {
            var cart = JSON.parse(localStorage.getItem('cart'));
            document.getElementById('cart-link').innerHTML = "Cart (" + Object.values(cart).reduce((accumulator, currentValue) => {
                return accumulator + currentValue;
            }, 0) + ")"
        }
        $('.atc').on('click', (event) => {
            item_id = event.target.id.toString();
            if (cart[item_id] != undefined) {
                cart[item_id] += 1;
            }
            else {
                cart[item_id] = 1;
            }
            localStorage.setItem('cart', JSON.stringify(cart));
            let nr_cart_items = Object.values(cart).reduce((accumulator, currentValue) => {
                return accumulator + currentValue;
            }, 0);

            document.getElementById('cart-link').innerHTML = "Cart (" + nr_cart_items + ")"

            function displayCart(cart) {
                let cartString = "";
                cartString += "<h4>Your Cart</h4>";
                let index = 1
                for (let item in cart) {
                    cartString += index + document.getElementById('prod-name-' + item).innerHTML + " --> " + cart[item]
                    index += 1
                }
                document.getElementById("cart-link").setAttribute('data-bs-content', cartString);
            }
            displayCart(cart)
        });

        // popover code
        $(function () {
            $('[data-bs-toggle="popover"]').popover({
                html: true,
                title: '<h4>Your Cart</h4>',
                content: 'hello'
            });
        });




    </script>

</body>

</html>

I am also getting this error when displayCart function runs.

Verify the HTML that has been rendered as it exists in the browser. Verify that your element references are correct.

I saw that due to pagination, only products of current page are available in the DOM. That’s why it shows Cannot read properties of null (reading innerHTML). But the cart’s popover is still not showing the cart items dynamically on testing with current page items.