displaying modal image from loop, function in javascript

so i am trying to display some images onclick function, which comprises of many clickable images. Problem is that i made the thumbnail images from an arrayloop in php. Found a way to set distinct id per items but have no idea on how to call it in my JS file. my html

<img class="product-img" src="<?php echo $row["image"]; ?>" onclick="myFunction()"> 
    <span class="detail" id="detail_<?php echo $row["id"]?>"><img src="<?php echo $row["hover-img"] ?>"><span class="close">&times;</span></span>

so here's what i tried

function myFunction() {
for(var i=1; i<1000; i++){
document.getElementById("detail_"+ i).style.visibility = "visible";}}

i'm aiming so that my JS can read them as how id's read normally (ex: detail_268). If i try to input a specific number on getElementById, the function works properly on the specific id 268.

document.getElementById("detail_268").style.visibility="visible";

Any help will be appreciated. Help please i'm stuck for hours for being such a beginner. Thank you for any help given!