Toggling display of multiple related elements - php

Question

I have two sets of buttons for every package, one for inserting data into my database and the other for deleting data from the database.
When I click the 'Select' button data will be inserted through AJAX and then hide the 'Select' button and display the 'Selected' button. When I click on the 'Selected' button the data will be deleted from the database through an AJAX call. The 'Selected' button will then be hidden and the 'Select' button will be shown again.
All the select & selected buttons are within a PHP while loop so the buttons have the same name but incremental IDs. When I click on one single 'Select' button, the other button is also showing me 'Selected'. I need something to track the each button ID when I click.
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast" id="<?php echo $id ; ?>" onClick="addintoListBroadcast(this)">Select</a>
<a class="btn btn-primary active-button active-button-broadcast" id="<?php echo $id ; ?>" onClick="deleteintoListBroadcast(this)" style="display: none;">Selected</a>
</div>
<script>
$('.select-btn-broadcast').click(function (e) {
var pkgId = this.id;
//alert(pkgId);
$('.select-btn-broadcast').hide();
$('.active-button-broadcast').show();
});
$('.active-button-broadcast').click(function(e) {
$('.select-btn-broadcast'.show();
$('.active-button-broadcast').hide();
});
</script>

Answer 1

The main issue with your code is because you select all the elements with the given class, not just the one related to the element which was clicked. To fix this use the this keyword to traverse the DOM to find the sibling() a element, and then amend it as required.
Also note that there's several other things you can improve in your code. Firstly, don't use inline CSS. Use the classes you've already applied to the elements to amend their styling in an external stylesheet.
Similarly, don't use inline event handlers such as onclick. Call the relevant functions within the unobtrusive event handlers you've bound through jQuery.
With all that said, here's a working example:
$('.select-btn-broadcast').on('click', function(e) {
$(this).hide().siblings('.active-button-broadcast').show();
// addintoListBroadcast(this);
});
$('.active-button-broadcast').on('click', function(e) {
$(this).hide().siblings('.select-btn-broadcast').show();
// deleteintoListBroadcast(this);
});
.active-button-broadcast {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>