Wordpress link and content - php

Question

I'm creating a menu for wordpress, but when I click on the permalink the content stays the same. And my second dropdown does not work eather. The problem is that on my section where the content needs to be it not shows. The content just takes the last message and not the post i select on the menu.
https://i.gyazo.com/1698056c27baa40768659d2edab5e3d9.png
This is how it stays even if i click an other post.
<?php
get_header();
?>
<div class="menu">
<div>
<h1>Documentatie</h1>
</div>
<?php $cats = get_categories();
foreach ($cats as $cat) {
$cat_id= $cat->term_id;
echo "<div class='dropdown'>";
echo "<button onclick='myFunction()' class='dropbtn'>".$cat->name."</button>";
echo "<div id='myDropdown' class='dropdown-content'>";
query_posts("cat=$cat_id&post_per_page=100");
if (have_posts()) : while (have_posts()) : the_post(); ?>
<button class="dropbutton"><h2><?php the_title(); ?></h2></button>
<?php endwhile;
?>
</div>
</div>
<?php
else :
echo "<p>Geen content gevonden</p>";
endif;
wp_reset_postdata();
}
?>
</div>
<div class="content">
<h2><?php the_title(); ?></h2>
<div class="wpcontent"><?php the_content(); ?> </div>
</div>
<?php wp_footer(); ?>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

Answer 1

Have a look at my other 2 comments and proposed solution below, this is not a WP issue you're facing, it's JS/jQuery
echo "<div class='dropdown'>";
echo "<button onclick='myFunction(" . $cat->slug . ")' class='dropbtn btn-" . $cat->slug . "'>".$cat->name."</button>";
echo "<div id='myDropdown' class='dropdown-content'>";
And:
function myFunction(cat_slug) {
$('.btn-' + cat_slug).show();
}
Try that, should work :)