Custom popup in ngFor loop stays in the same spot - html

Question

I have an HTML file where every time I click on the settings button, a popup with edit and delete buttons is supposed to appear like so:
(I clicked ash Ketchum)
[][1]
[1]: https://i.stack.imgur.com/tnXWm.png
However, as I move down the list, the popup is not relative to the button I click on, but rather is stuck in the same place like so:
[][2]
[2]: https://i.stack.imgur.com/Bgwzi.png
My question is, how could I style this popup to truly popup relative to the button chosen and not just stuck in a static position?
Here is the html and style file:
<div class="dropdown">
<nav>
<table class="tableLayout">
<ion-buttons slot="end" class="editButtonItem" (click)="onGetDragonIndex(dragon)">
<ion-button>
<label for="touch">
<span class="dropdown">
<ion-icon md="ellipsis-vertical" aria-label="ellipsis horizontal" role="img"
class="editButton"></ion-icon>
</span>
</label>
</ion-button>
</ion-buttons>
</table>
</nav>
<input type="checkbox" id="touch">
<div class="slide">
<div class="listItem">
<label for="touch">
<dragon-dragon></dragon-dragon>
</label>
</div>
</div>
</div>
.css
label {
padding: 0px;
}
span.dropdown {
padding-bottom: 15px;
padding-top: 20px;
cursor: pointer;
display: block;
z-index: 1;
}
span::after {
float: right;
right: 10%;
z-index: 1;
}
.slide {
height: 0px;
overflow: hidden;
text-align: center;
box-shadow: 2px 2px 2px 0px rgba(0.2, 0.2, 0.2, 0.2);
width: 110px;
background: white;
z-index: 2;
position: absolute;
margin-top: -10px;
}
.slide .listItem {
padding-top: 5px;
padding-bottom: 5px;
}
#touch {
position: absolute;
opacity: 0;
height: 0px;
}
#touch:checked+.slide {
height: 85px;
}
.tableLayout {
table-layout: fixed;
width: 100%;
}