While the time of execution the buttons don't exist since they are not rendered, so instead add buttons first then add the JS

{% endblock %}
{% block content %}
    
<div class="h1">Quiz List</div>
<hr>

{% for obj in object_list %}

<button
  class="btn btn-link modal-button"
  data-pk='{{obj.pk}}'
  data-quiz='{{obj.name}}'
  data-questions='{{obj.number_of_questions}}'
  data-difficulty='{{obj.difficulty}}'
  data-time='{{obj.time}}'
  data-pass='{{obj.required_score_to_pass}}'
  data-bs-toggle="modal" 
  data-bs-target="#quizStartModal">
  {{obj.name}}
</button>
<br>


{% endfor %}
{% endnlock %}

{% block scripts %}
    
<script>
  console.log('hello world')
  const modalBtns = [...document.getElementsByClassName('btn btn-link modal-button')]
        
  modalBtns.forEach(modalBtn=> modalBtn.addEventListener("click", function(){
    console.log(modalBtn)
  })) 
    
</script>

Looks like the dom isn't rendering the buttons before the script tag invokes your JS.

Try wrapping the script code inside a load event listener.

So your Code in the script tag goes from this:

<script>
 console.log('hello world')
 const modalBtns = [...document.getElementsByClassName('btn btn-link modal-button')]
       
 modalBtns.forEach(modalBtn=> modalBtn.addEventListener("click", function(){
   console.log(modalBtn)
 })) 
   
</script>

To this:

<script>
window.addEventListener('load', (event) => {
  console.log('hello world');

  const modalBtns = [...document.getElementsByClassName('btn btn-link modal-button')];
  modalBtns.forEach(modalBtn=> modalBtn.addEventListener("click", function(){
    console.log(modalBtn);
  }));

});
</script>