I have a code where is display a set of images using foreach loop and when clicked it should return in the console the name of the image.

I tried the below code :

```
    <?php

    foreach ($gallery as $i) {

    ?>
    <img src="<?php echo "$i"; ?>" id="modal_img">

   <?php }
    ?>

```

the above code is the one that display the image through foreach loop iteration.

```
    $(function(){
       $("#modal_img").on("click",function(){
       var src = $(this).attr("src");
        console.log(src);
       })
     })

```

But with this code , every time I try, only the first image produces the result in the console , the other images when clicked gives no response in the console log. Can someone help me to resolve this. I have attached the image of screen below which shows the how the images are displayed.

[![enter image description here](https://i.stack.imgur.com/g4Inh.png)](https://i.stack.imgur.com/g4Inh.png)