How to implement navigation DB data in Django?

got this code from a friend, we use django and bootstrap to make a rather simple site that displays job offers, until now we displayed the job offers in a row and each offer had a button "apply" that sent the resume etc.. But we would like to change that and only display one job at a time, each job would have 2 buttons "apply" and "next". We tried in a barbaric way to do all this but we have a problem, the next button works well thanks to a little javascript incorporated by my friend but the "apply" button we would like to move to the next offer after clicking on it, for now it only applies we can't get it to display the next offer, how to do? Thank you very much for simplifying your answers I am a beginner in web development, here is the code of my Django template:

{% extends 'base2.html' %}
{% load static %}
{% block title %}
    Dashboard
{% endblock %}
{% block content %}

<body class="hold-transition light-mode  layout-fixed layout-navbar-fixed layout-footer-fixed">
 <div class="wrapper" >
 <div class="content-wrapper" >



    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Emplois actifs</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Jobs</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Offres d'emploi correspondant à votre profil</h3>
              </div>
            <h5>{% include '_messages.html' %}</h5>
              <!-- /.card-header -->
              <div class="card-body">


                <div class="row mt-4">


                        {% for item in all_relevent_opened_jobs %}
                           <div class="col-sm-4 job-card" data-job-id="{{ item.id }}">
    <div class="position-relative p-3 bg-gradient-light" style="height: 380px">

                  <br>
                  <br>
                   <ul>
                       <li><b>Catégorie</b>: {{ item.category.job_category_title}}</li>
                       <li><b>Titre de l'emploi</b>: {{ item.job_title}}</li>
                       <li><b>Description</b>: {{ item.job_description}}</li>
                       <li><b>Experience</b>: {{ item.required_experience}} (années)</li>
                       <li><b>Salaire</b>: ${{ item.salary}}</li>

                       <li><b>Horaires</b>: {{ item.working_hours }} heures par semaine</li>
                       <li><b>Ville</b>: {{ item.location }}</li>

                       <button class="next-job btn btn-primary">Suivant</button>
                        <a href="{% url 'apply_to_open_positions' item.id %}" class="btn btn-primary apply-job"> Postuler</a>


                   </ul>

                    </div>
            </div>
                    {% endfor %}
            </div>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->

 </div>
 </div>



</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function(){
    $('.job-card').hide();
    $('.job-card').first().show();
});
</script>
<script>
$(document).ready(function(){
    $('.next-job').click(function(){
        $('.job-card:visible').hide().next('.job-card').show();
    });
    $('.apply-job').click(function(){
        $('.job-card:visible').hide().next('.job-card').show();
    });
});
</script>
<script>
$(document).ready(function(){
    $('.next-job').click(function(){
        if($('.job-card:visible').next('.job-card').length){
            $('.job-card:visible').hide().next('.job-card').show();
        }
    });
    $('.apply-job').click(function(){
        if($('.job-card:visible').next('.job-card').length){
            $('.job-card:visible').hide().next('.job-card').show();
        }
    });
});
</script>
<script>
$(document).ready(function(){
    $('.job-card').not(':first').hide();

    $('.next-job').click(function(){
        if($('.job-card:visible').next('.job-card').length){
            $('.job-card:visible').hide().next('.job-card').show();
        }
        else {
            $('.no-more-jobs').show();
        }
    });

    $('.apply-job').click(function(e){
        e.preventDefault();
        window.location = $(this).attr('href');
    });
});
</script>

{% endblock %}
Back to Top