After clicking the "..." button, I want to display the edit and delete buttons. However, when I implement this code, it applies to all three buttons instead of just the one I clicked on.
I need guidance on how to modify the jQuery code so that it only affects the button I have clicked, not all of them.
The Code :-
HTML :
<div class="commentdropdown pr-3">
<button class="dropbtn btn p-0 m-0 bg-white">...</button>
<div class="dropdown-content">
<a href="#">Edit</a>
<a href="#">Delete</a>
</div>
<button class="dropbtn btn p-0 m-0 bg-white">...</button>
<div class="dropdown-content">
<a href="#">Edit</a>
<a href="#">Delete</a>
</div>
<button class="dropbtn btn p-0 m-0 bg-white">...</button>
<div class="dropdown-content">
<a href="#">Edit</a>
<a href="#">Delete</a>
</div>
</div>
CSS :
.commentdropdown{
float: right;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.apear{
display: block;
}
.commentbtn{
width: 30vw;
}
JavaScript :
$(".commentdropdown").on("click", function(){
$(this).find(".dropdown-content").toggleClass("apear");
});
Thanks