Jquery image gallery with next and prev buttons

I've made an image gallery with jQuery (click on image and it appears big onscreen). I wanted to add a 'next' and 'prev' button to switch from view, basically replacing the src attribute from the image highlighter with the next or previous image when clicked. But can't seem to get it to work.

<div class="row">
        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-1.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-2.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-3.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/hand-rose55.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/ROSE-BLACK.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/rose-blgr.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>
    </div>
        <div class="photo-size">
            <a href="#" class="close">CLOSE</a>
            <div class="image-viewer"></div>
            <a href="#" class="next">NEXT</a>
            <a href="#" class="prev">PREV</a>
           </div>

I'm not even sure if the next function is in the right position for overwriting the data:

$( document ).ready(function() {
    $('.img-highlight').click(function () {
        const el = $(".photo-size");
        el.css("display", "block");
        var src = $(this).attr('src');
        const block = $(".image-viewer");
        $(this).clone().appendTo(block).attr('src', src).addClass('highlighted-img');
        $('.next').click(function(ev){
            ev.preventDefault();
            var src = $(this).parent().next().find('img').attr('src');
            alert(src);
        });
    });

    $('.close').click(function (ev) {
        ev.preventDefault();
        $('.image-viewer').empty()
        $(".photo-size").css("display", "none");
    });

});