How to loop button in javascript to show result on PHP only 1st row showing

<pre> <script type="text/javascript">

        const displayCoordinates = function (coord) {
        document.querySelector('.coord').textContent = coord;
        };

        document.querySelector('.check').addEventListener('click', function () {
        const holder =(document.querySelector('.holder').value);

        displayCoordinates(holder).value;
      });

      </script>

<?php
           foreach ($result as $key => $row) {
                   ?>
           <tr>
               <td><?php echo $row['id']; ?></td>
               <td><?php echo $row['cat']; ?></td>
               <td><?php echo $row['size']; ?></td>
               <td><?php echo $row['material']; ?></td>
               <td> <button class="btn check">Locate</button>
                  <input type="hidden" class="holder" value="<?php echo $row['lat'].','. $row['lon']; ?>" />
               </td>
           </tr>
       <?php
            }
       ?>