Отображение изображений по одному, когда пользователь нажимает кнопку next в Django

Я создал приложение django, в котором пользователь загружает несколько pdf файлов, а приложение конвертирует их в png и отображает изображения. Я использую ModelForms для этой цели. Загрузка и преобразование работают нормально, но как мне отобразить изображения последовательно ?

Я хочу отобразить одно изображение, и когда пользователь нажимает на кнопку next, должно отображаться следующее изображение. Ниже приведен код моего приложения:

models.py

from django.db import models
from django.contrib.auth.models import User

# Create your models here.

class UserUploadModel(models.Model):
    
    user = models.ForeignKey(User, on_delete = models.CASCADE, null = True)
    file = models.FileField(upload_to = 'file_uploads/%d%m%Y')

views.py

from django.shortcuts import render, redirect
from app1.forms import UserUploadForm
from app1.models import UserUploadModel
from app1.convert import convert_file
from app1.transfer import move_dir
import os
from project1 import settings

# Create your views here.

def home(request):
    
    if request.method == 'POST':
        form = UserUploadForm(request.POST, request.FILES)
        
        if form.is_valid():
            f = form.save()
            f.user = request.user
            f.save()
          
            ff = request.FILES.getlist('file')
            f_list = []

            for i in ff:
                file_instance = UserUploadModel(file = i)
                file_instance.save()
                f_list.append(file_instance.file.path)
            
            [convert_file(j) for j in f_list]

            src_dir = os.getcwd()
            dest_dir = os.path.join(src_dir, 'media/converted_files')            
            move_dir(src_dir, dest_dir, '*.png')
            
            return redirect('app1-display')
    else:
        form = UserUploadForm()
    return render(request, 'app1/home.html', {'form' : form})


def display(request):
    return render(request, 'app1/display.html')

home.html

{%extends "app1/base.html"%}
{%block content%}

    <form method="POST" enctype="multipart/form-data">
      {%csrf_token%}
      {{form.as_p}}
      <input type="submit">
    </form>

{%endblock content%}

{% extends "app1/base.html" %}
{% block content %}

    {% for image in request.user.useruploadmodel_set.all %}
         <image src={{ image.url }} style="width: 100%{% if not forloop.first %}; display: none{% endif %}" />
    {% endfor %}
    <button id="nextBtn">Next</button

    <script>
        $(() => {
            $("#nextBtn").click(() => {
               $('image:visible').hide().next().show()
            })
        })
    </script>

{% endblock %}