I am getting Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Question

I am building an e-com site using the Django framework. to make it more efficient I am using javascript here and there. So the problem occurs at the checkout page and specifically if a user is logged in. On my site, a user can shop even if he is not logged in as a guest user. so if a guest user is going to the checkout page he can submit the process and make payment without running into any issues. But when a user is logged in the checkout page returns the error on load! even before writing anything into the form. I am attaching the checkout page code here for you guys to give it a good look. I have tried to debug it as well as run into the built-in code snippets here. It works fine without any issues

{% extends 'store/main.html' %}
{% load static %}
{% block content %}

<div class="row">
    <div class="col-lg-6">
        <div class="box-element" id="form-wrapper">
            <form id="form">
                <div id="user-info">
                    <div class="form-field">
                        <input required class="Form-control" type="text" name="name" placeholder="Name">
                    </div>
                    <div class="form-field">
                        <input required class="Form-control" type="email" name="email" placeholder="Email">
                    </div>
                </div>
                <div id="shipping-info">
                    <hr>
                    <p>shipping-info</p>
                    <hr>
                    <div class="form-field">
                        <input required class="Form-control" type="text" name="address" placeholder="Street">
                    </div>
                    <div class="form-field">
                        <input required class="Form-control" type="text" name="city" placeholder="City">
                    </div>
                    <div class="form-field">
                        <input required class="Form-control" type="text" name="state" placeholder="State">
                    </div>
                    <div class="form-field">
                        <input required class="Form-control" type="text" name="zipcode" placeholder="Zip Code">
                    </div>
                </div>

                <hr>
                <div class="d-grid gap-2">
                    <input id="form-button" class="btn btn-outline-info" type="submit" value="Continue">
                </div>
            </form>
        </div>
        <br>

        <div class="col-lg-6">
            <div class="box-element hidden" id="payment-info">
                <small>Paypal</small>
                <button id="make-payment">Make Payment</button>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="box-element">
            <a class="btn btn-outline-primary" href="{% url 'cart' %}">&#x2190;Back to Cart</a>
            <hr>
            <h3>Order Summary</h3>
            <hr>
            {% for item in items %}
            <div class="cart-row">
                <div style="flex: 2;"><img class="row-image" src="{{item.product.imageURL}}"></div>
                <div style="flex: 2;">{{item.product.name}}</div>
                <div style="flex: 1;">${{item.product.price|floatformat:2}}</div>
                <div style="flex: 1;">
                    <p><strong>x{{item.quantity}}</strong></p>
                </div>
            </div>
            {% endfor %}
            <h5>Items: {{order.get_cart_items}}</h5>
            <h5>Total: ${{order.get_cart_total|floatformat:2}}</h5>
        </div>
    </div>
</div>

<script type="text/javascript">
    var shipping = '{{order.shipping}}'
    var total = '{{order.get_cart_total|floatformat:2}}'

    if (shipping == 'False') {
        document.getElementById('shipping-info').innerHTML = ''
    }

    var form = document.getElementById('form');
    form.addEventListener('submit', function (e) {
        e.preventDefault()
        console.log('form submitted...')
        document.getElementById('form-button').classList.add('hidden')
        document.getElementById('payment-info').classList.remove('hidden')
    })

    document.getElementById('make-payment').addEventListener('click', function (e) {
        submitFormData()
    })


    function submitFormData() {
        console.log('Payment button clicked')
        var userFormData = {
            'name': null,
            'email': null,
            'total': total,
        }

        var shippingInfo = {
            'address': null,
            'city': null,
            'state': null,
            'zipcode': null,
        }

        if (shipping != 'False') {
            shippingInfo.address = form.address.value
            shippingInfo.city = form.city.value
            shippingInfo.state = form.state.value
            shippingInfo.zipcode = form.zipcode.value
        }

        if (user == 'AnonymousUser') {
            userFormData.name = form.name.value
            userFormData.email = form.email.value
        }

        var url = '/process_order/'
        fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrftoken,
                },
                body: JSON.stringify({
                    'form': userFormData,
                    'shipping': shippingInfo
                })
            })

            .then((response) => response.json())
            .then((data) => {
                console.log('Success:', data);
                alert('Transaction Completed!');

                cart = {}
                document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"
                window.location.href = "{% url 'store' %}"

            })
    }
</script>

{% endblock content %}