How do I use Javascript eventListeners in Django project

I am pretty much new to the Django framework and working on a small project that requires me to use static files (JavaScript) in it. I have a couple of buttons that I want to manipulate from the DOM but for some reason, I cannot have access to these buttons using DOM manipulations.

Can someone please tell me why I can't print these buttons in my console? What I get an an output is an empty HTMLcollection[]

const deleteButton = document.getElementsByClassName('delete-button');
console.log(deleteButton);

** Template **

<div class="my-2">
            {% for todo in mytodos %}
            <div class="checkbox my-2">
                <div class="checkbox-wrapper">
                    <input type="checkbox" id="cbox3" class="mr-2" value="third_checkbox">
                    <label for="cbox3"> {{ todo.todotext }} </label>
                </div>
                <div>
                    <a href= {% url 'delete' %}>
                        <button class="delete-button btn btn-outline-danger">Delete</button>
                    </a>
                </div>
            </div>
            
            {% endfor %}
            
        </div>