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
});