jQuery toggle on a PHP foreach statement

Question

The code for the page is the following

<?php foreach ($organization->index() as $id=>$content) { ?>
<a href="#" id="obtain_branch"><?= $content->name?></a>
<div id="directory_brnach"><?= $content->about?></div>
<?php } ?>

The JavaScript code using jQuery is

 // Directory inner branches
$('#obtain_branch').click(function(){
   $('#directory_brnach').toggle('fast');
});

The problem it will only work on the first one given the the ID is not changing, the rest will not change.

How can I send an array to the jQuery function to give an individual ID on every iteration?

Thanks in advance.

Answer 1

The #obtain_branch selects the first element with that ID. Using a class will help for the links, but not for the divs - that will toggle them all at once. Try:

<?php foreach ($organization->index() as $id=>$content) { ?>
<a href="#" class="obtain_branch"><?= $content->name?></a>
<div class="directory_brnach"><?= $content->about?></div>
<?php } ?>

JavaScript:

$('.obtain_branch').click(function(){
    $(this).next('.directory_brnach').toggle('fast');
    return false; //to avoid the link from working
});

Answer 2

IDs need to be unique. Try:

<?php foreach ($organization->index() as $id=>$content) { ?>
<a href="#" class="obtain_branch"><?= $content->name?></a>
<div><?= $content->about?></div>
<?php } ?>

with:

$('a.obtain_branch').click(function(){
   $(this).next().toggle('fast');
   return false;
});