Three dots menu PHP HTML - php

Question

I am creating a social site and I want to leave three menu dots on the top right corner of each individual post a user makes. But it only works on one post. They show up on all of the posts but when I click it, the dropdown content only shows on the very first post at the top of the page.
I put it in my posts loop so I don't see why it's not working.
$str .= "<div class='status_post'>
<div class='post_profile_pic'>
<img src='$profile_pic' width='50'>
</div>
<!-- three dot menu -->
<div class='dropdownPosts'>
<!-- three dots -->
<ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown()'>
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div id='myDropdown' class='dropdownPost-content'>
<a href='#home'>Home</a>
<a href='#about'>About</a>
<a href='#contact'>Contact</a>
</div>
</div>
<div class='posted_by' style='color:#ACACAC;'>
<a href='$added_by'> $username </a> $user_to $time_message
$delete_button
</div>
<div id='post_body'>
$body
<br>
$imageDiv
<br>
<br>
</div>
<div class='newsfeedPostOptions' onClick='javascript:toggle$id(event)'>
Comments($comments_check_num)
<iframe src='like.php?post_id=$id' scrolling='no'></iframe>
</div>
</div>
<div class='post_comment' id='toggleComment$id' style='display:none;'>
<iframe src='comment_frame.php?post_id=$id' id='comment_iframe' frameborder='0'></iframe>
</div>
<hr>";
.header{
width: 100%;
background-color: #0d77b6 !important;
height: 60px;
}
.showLeft{
color:#000 !important;
padding:10px;
}
.icons li {
background: none repeat scroll 0 0 #000;
height: 7px;
width: 7px;
line-height: 0;
list-style: none outside none;
margin-right: 15px;
margin-top: 3px;
vertical-align: top;
border-radius:50%;
pointer-events: none;
}
.btn-left {
left: 0.4em;
}
.btn-right {
right: 0.4em;
}
.btn-left, .btn-right {
position: absolute;
top: 0.24em;
}
.dropdownbtn {
position: absolute;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
margin-top: 6%;
margin-right: 30%;
}
.dropdownPosts {
position: absolute;
display: inline-block;
right: 0.4em;
}
.dropdownPost-content {
display: none;
position: absolute;
margin-top: 60px;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdownPost-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdownPosts a:hover {background-color: #f1f1f1}
.show {display:block;}
<script>
function changeLanguage(language) {
var element = document.getElementById("url");
element.value = language;
element.innerHTML = language;
}
function showDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropdownbtn')) {
var dropdowns = document.getElementsByClassName("dropdownPost-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

If you remove any duplicated IDs from the HTML and modify the 3-dots portion like so
<div class='dropdownPosts'>
<!-- three dots -->
<ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown(event)'>
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div class='dropdownPost-content'>
<a href='#home'>Home</a>
<a href='#about'>About</a>
<a href='#contact'>Contact</a>
</div>
</div>
You can then likey modify your showDropdown function like this:
function showDropdown(event) {
event.target.nextElementSibling.classList.toggle("show");
}