Pfthb

I want to have a 'popup' div whenever I click on a row. I tried to do this with javascript to toggle a class.
We are filling a table with WordPress custom post types and the number of rows are therefor unknown.

The id "bedrijfsinfo-x" is being generated correctly, and function counts the right amount of rows. It still toggles the class on all divs instead of just the one associated with the row I clicked on.

Any help would be greatly appreciated!

<?php $counter = 1 ; ?>
 <?php
 // Als er berichten zijn gevonden.
 if ( $posts->have_posts() ) 
 // While loop om alle berichten op te halen
 while ( $posts->have_posts() ) :
 $posts->the_post();
 global $post;
 ?>

 <tr id="su-post-<?php the_ID(); ?>" class="su-post contracten">
 <td class="meta_data" onclick="showInfo()"><?php bedrijfsnaam(); ?></td>
 <td><?php naam_contactpersoon(); ?></td>
 <td><?php url(); ?></td> 
 <td><?php start(); ?></td>
 <td><?php eind(); ?></td>
 <td><?php frequentie(); ?></td>
 <td><?php datum_onderhoud(); ?></td>
 </tr>
 <div id="bedrijfsinfo-<?php echo $counter?>" class="infobox">
 <p>Bedrijfsinformatie<br><?php bedrijfsnaam() . url() . start() . eind(); ?></p>
 <button onclick="showInfo()"><p class="button">Sluiten</p></button>
 </div>
 <?php $counter = $counter + 1; ?>
 <?php endwhile; 

<script>

function showInfo() 
 var tr_count = document.getElementsByTagName("tr").length;
 for (var i = 1; i < tr_count; i++) 
 var popup = document.getElementById("bedrijfsinfo-"+ i);
 popup.classList.toggle("show");
 


</script>

Your showInfo function iterates over the entire number of rows. Sounds like that's not what you want. Maybe try passing in the id of the thing clicked?

<td class="meta_data" onclick="showInfo(<?php $counter; ?>)"><?php bedrijfsnaam(); ?></td>
// ...
<button onclick="showInfo(<?php $counter; ?>)"><p class="button">Sluiten</p></button>

function showInfo(i) 
 var popup = document.getElementById("bedrijfsinfo-"+ i);
 popup.classList.toggle("show");