Not able to show modal using imageUrl

Im not able to show modal using imageUrl.

I need to show the modal using JavaScript but no success till now. In the code below, I have used for loop to get all images cards to be showed in home page of image gallary. But not able to show a modal when the image card button is clicked. Here is the index page with full code

<!doctype html>
<html lang="en">

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    {% include 'navbarHA.html' %}
    <title>HOBBIESALIVE</title>
    
    <style>
        .bg {
            background: #90caf9 !important;
        }

        .list-group-item.active {
            background: #90caf9 !important;
            border-color: #90caf9 !important;

        }
    </style>




</head>

<body>
    
    <h1> Hello! HOBBIESALIVE :) </h1>

    <!--main code-->

    <div class="row">

        <div class="col-md-2">

            <!--categories-->
            <div class="list-group mt-3">
                <a href="/home" class="list-group-item list-group-item-action active" aria-current="true">
                    All Categories
                </a>

                {% for c in CatsHA %}

                <a href="/category/{{c.pk}}" class="list-group-item list-group-item-action">{{c.cat_title}}</a>
                {% endfor %}
            </div>

        </div>

        <div class="col-md-10 mt-3">

            <!--images-->
            <div class="row row-cols-1 row-cols-md-5 g-4">
                {% for i in imagesHA %}

                <div class="card">
                    <img class="card-img-top" src="/media/{{i.image}}" alt="OOoooppss!!!">
                    <div class="card-body">
                        <h5 class="card-title">{{i.title}}</h5>
                        <p class="card-text">{{i.description}}</p>
                        <a href="#" class="btn btn-primary" onclick="showIMG('{{i.image}}')"> view </a>
                    </div>
                </div>
                {% endfor %}
            </div>

        </div>
    </div>


<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button> -->

<!-- Modal -->


<div class="modal fade" id="image-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img src="#!" id="image-show" class="img-fluid" alt="xxMxx">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>






    
 
  
<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
    crossorigin="anonymous">
</script> 

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->


<script>

    function showIMG(imageUrl) {

        $('#image-modal').modal('show')
        $('#image-show').attr('src',`/media/${imageUrl}`)  
    }

</script>

</body>

</html>
-----------------------------------------------------------

CONSOLE 


System check identified some issues:

WARNINGS:
HA_app.Category: (models.W042) Auto-created primary key used when not defining a primary key type, by default 'django.db.models.AutoField'.
        HINT: Configure the DEFAULT_AUTO_FIELD setting or the HaAppConfig.default_auto_field attribute to point to a subclass of AutoField, e.g. 'django.db.models.BigAutoField'.
HA_app.Image: (models.W042) Auto-created primary key used when not defining a primary key type, by default 'django.db.models.AutoField'.
        HINT: Configure the DEFAULT_AUTO_FIELD setting or the HaAppConfig.default_auto_field attribute to point to a subclass of AutoField, e.g. 'django.db.models.BigAutoField'.

System check identified 2 issues (0 silenced).
May 31, 2021 - 20:34:40
Django version 3.2, using settings 'HA_proj.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[31/May/2021 20:35:03] "GET /home/ HTTP/1.1" 200 9396
[31/May/2021 20:35:03] "GET /home/ HTTP/1.1" 200 9396 ```

Solution

Bootstrap 5 is designed to be used without jQuery, but you can still load jquery in your page and your script will work fine. However if you want to use vanilla js which is recommended with bootstrap 5, all you need to do is change your modal interaction function to this

function showIMG(imageUrl) {
  const myModal = new bootstrap.Modal(document.querySelector('#image-modal'));
  myModal.show();
  document.querySelector('#image-show').setAttribute('src', `/media/${imageUrl}`);
}