Implement adding an image from gallery to favourites, which is displayed on a separate page// DJANGO/JS

Essentially I am creating a web gallery with Django/JS for a project, however the project needs to feature CRUD functionality. Currently I have a functioning modal when an image in the gallary is clicked, along with an "Add to Favourites" button when the user is logged in. I am struggling to come up with a way to append these images dynamically to the favourites HTML page. I am unsure whether this is easier done with JS or Django.

Here is my current JS code:

$(function() {
    $('.myImg').each(function() {
        $(this).click(function() {
            $('#myModal').css('display', 'block')
            $('#imgModal').attr('src', this.src)
            $('.navbar').css('display', 'none')
        })
        /* Favourite image functionality */
        var favouriteImages = []
        
        imgSrc = $(this).attr('src', this.src);
        $('#favourites-btn').click(function () {
            favouriteImages.push(imgSrc)
        })
    })
    $('.close').each(function() {
        $(this).click(function() {
            $('#myModal').css('display', 'none')
            $('.navbar').css('display', 'flex')
        })
    })
})

favouriteImages.forEach(function() {
    $('#favourites-gal').append(<img class='myImg'/>)
})

At the bottom, with the favouriteImages.forEach function, I dont know how to include the src of the specific image that is being appended after clicking the Add to Favorites button.

For reference: In the actual gallary of images the code structure of the HTML is:

<div class="gal">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy1.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy2.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy3.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy4.webp' %}" alt="">



                <img class="myImg" src="{% static 'img/artsy-gallery/artsy5.webp' %}" alt="">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy6.webp' %}" alt="">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy7.webp' %}" alt="">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy8.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy9.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy10.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy11.webp' %}" alt="">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy12.webp' %}" alt="">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy13.webp' %}" alt="">
            </div>

The favourites gallary will follow the same structure, only this time the images will be appended to the gal div, dynamically, after being added by the user to their favourites using the "Add to favourites button.

INCASE THIS INFORMATION IS NEEDED THIS IS THE HTML STRUCTURE OF THE MODAL THAT CONTAINS THE FAVOURITES BUTTON:

<div id="myModal" class="modal text-center" tabindex="-1" role="dialog">
        <img class="modal-content" id="imgModal">
        {% if user.is_authenticated %}
        <button id="favourites-btn" class="uppercase btn btn-primary overlay-btn">Add to Favourites</button>
        {% endif %}
        <span class="close">&times;</span>
</div>

I am quite lost in what to attempt, and am not sure if I am using the appropriate technology for this, it feels a little overly complicated and am unsure if this could just be accomplished easier by purely using Django.

Back to Top