How to target one class when you are in loop? - php

Question

All the PHP code is in the post loop so when adding a new post it gets also the buttons and when pressing one button it opens all buttons and containers
<div class="col-sm-1 ">
<span class="btn btn-sm album-song">
<a class="btn btn-sm show-album-song">⋁</a>
<a class="btn btn-sm hide-album-song">⋀</a>
</span>
</div>
<div class="container album-songs-show-hide">
<div class="row">
<div class="col-sm-4 name"><?php _e('Song Name', 'koband');?></div>
<div class="col-sm-4"><?php _e('Song Length', 'koband');?></div>
<div class="col-sm-4"><?php _e('Song Details', 'koband');?></div>
</div>
<div class="row" style="background-color: #d6d6d6; border-bottom: 1px solid #000;">
<?php foreach ($album_song_details[0] as $value_song_details) { ?>
<div class="col-sm-4"><?php echo $value_song_details['name-details']; ?></div>
<div class="col-sm-4"><?php echo $value_song_details['length']; ?></div>
<div class="col-sm-4"><?php echo $value_song_details['detail']; ?></div>
<?php } ?>
</div>
</div>
and the jQuery code goes here
$(".album-songs-show-hide").hide();
$(".hide-album-song").hide();
$(".show-album-song").click(function(){
$(this).find(".album-songs-show-hide").slideDown(1000);// show container elements
$(".show-album-song").hide(); // button down hide
$(".hide-album-song").show(); // button up show
});

Answer 1

Thanks to all for commenting solutions but for me this was the working solution for you
$(".album-songs-show-hide").hide();
$(".hide-album-song").hide();
$(".show-album-song").click(function(){
$(this).closest("div.container").find(".album-songs-show-hide").slideDown(1000);// hide container elemnts
$(".show-album-song").hide(); // button down hide
$(".hide-album-song").show(); // button up show
});