javascript: I can't dynamically open the image in Modal (the first image is loading in Modal)

This is my view where I want the pop-up mode to appear when I click on the image and show the same image I am clicking on:

@foreach ($products as $product)

                    
image }}" style="width: 100%" onclick="openModal(); currentSlide(2)" class="hover-shadow cursor">

This is my script that I am using for my Modal to display images.

function openModal() {
        document.getElementById("myModal").style.display = "block";
    }

    function closeModal() {
        document.getElementById("myModal").style.display = "none";
    }

    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides(i).style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots(i).className = dots(i).className.replace(" active", "");
        }
        slides(slideIndex-1).style.display = "block";
        dots(slideIndex-1).className += " active";
        captionText.innerHTML = dots(slideIndex-1).alt;
    }

Modal shows me the same image when I click on any image. I want to see the modal image that I am clicking on.
Please someone help me. I'm stuck.