Tengo una galería donde tengo algunos botones para filtrar las imágenes por categoría. Cuando hace clic en una imagen, aparece un modal y muestra la imagen. Funciona cuando lo abro (al principio muestra todas las imágenes) y cuando elijo una opción 2021, pero con otras opciones no funciona. Lo extraño es que cuando hago clic en una imagen de (por ejemplo) la opción 2020, el modal no aparece, pero cuando hago clic en la opción 2021, aparece el modal con la imagen correcta. Los botones se ven así:

 <button data-filter=".2020">2020</button> <button data-filter=".2021">2021</button>

Leo los nombres de las imágenes de la base de datos mysql y las muestro con un ciclo while con php.

 query starts echo '<div class="col-lg-3 col-md-6 special-grid '; echo $row["category"]; echo '"> ... <img id="myImg'; echo $db; $db++; echo'" src="gallery/'; echo $row["picturename"]; echo'" class="img-fluid" alt="Image" width="480" height="380"> query ends

Modal:

 <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div>

JavaScript:

 <script> var modal = document.getElementById("myModal"); var modalImg = document.getElementById("img01"); for (let i = 0; i < <?php echo $sizeofgallery ?>; i++) { // Get the image and insert it inside the modal var img = document.getElementById("myImg" + i); img.onclick = function () { modal.style.display = "block"; modalImg.src = this.src; } } var span = document.getElementsByClassName("close")[0]; span.onclick = function () { modal.style.display = "none"; } </script>