DJANGO HTML Elements and Javascript

I’m trying to implement a “hover image” effect on a website drive by Django. Each model in my database contains 2 distinct images. I’d like to have the image change when the user hovers over the “default image” and have it change to the “hover image”. What’s happening instead is only the first image is changing to the hover image. If the user hovers over any other image on the page, the first image at the top of the page is the one that changes.

Here’s my HTML

{% for element in records %}
  <div class = "model">
   <img src="{{element.default_image}}" onmouseover="hoverImage();" onmouseout="defaultImage();" width="120"></div>

Here’s my JS

const imgElements = document.querySelectorAll('.model');
 
for (let i = 0; i < imgElements.length; i++) {                                   
     const currentElement = imgElements[i]; 
     function hoverImage() {
         currentElement.src = '{{element.hover_image}}';
      }
            
      function defaultImage() {
         currentElement.src = '{{element.default_image}}';
                   
       }
   }

This only changes the first element in the model no matter what image the user hovers over