Multiple Expand/Collapse Bootstrap buttons in a PHP foreach loop

Question

My code is almost working, with one issue that I'm having a hard time fixing. Here is some code that I have simplified.

    <?php for($counter = 0; $counter < 5; $counter++)
    {
    ?>
    <button type="button" id="<?php echo 'change_button_label_' . $counter?>" data-toggle="collapse" data-target="<?php echo '#button_number_' . $counter?>" class="btn btn-warning"><span class="glyphicon glyphicon-chevron-down"></span>Expand</button>

    <div id="<?php echo 'button_number_' . $counter?>" class="collapse">
        This gets collapsed #<?php echo "$counter"; ?>
    </div>

    <script>
        $('<?php echo "#change_button_label_" . $counter?>').click(function () {
            if($('button span').hasClass('glyphicon-chevron-up'))
            {
                $('<?php echo "#change_button_label_" . $counter?>').html('<span class="glyphicon glyphicon-chevron-down"></span>Expand');
            }
            else
            {
                $('<?php echo "#change_button_label_" . $counter?>').html('<span class="glyphicon glyphicon-chevron-up"></span>Collapse');
            }
        });
    </script>
    <?php
    }
    ?>

If I try to click 1 or more buttons, they work in the sense that each will expand/collapse and reveal/hide its relevant content as expected.

However, only the 1st button that is clicked (and it doesn't matter which one is clicked 1st) will have its text and glyphicon changed from "expand" to "collapse." All of the other buttons will continue to say "expand" regardless of if they are actually expanded or collapsed.

I'm hoping someone can help me figure out how to fix it so that the other buttons will toggle their text correctly when they are clicked. I don't mind gutting my attempted code above if needed.

Actual output:

Expected output:

The text on each button should look like the first one after they've been clicked. The expand/collapse feature is already working for each button.

Generated HTML/CSS output:
https://gist.github.com/bryanjamesmiller/c14e623152ab9b5f9246 Thank you in advance!

Answer 1

Take your script block out of the PHP for loop and bind to the button element itself, rather than the button ID:

<?php for($counter = 0; $counter < 5; $counter++)
{
?>
<button type="button" class="btn btn-danger" id="<?php echo 'change_button_label_' . $counter ?>">DISLIKES<span class="glyphicon glyphicon-thumbs-down"></span></button>
<?php 
}
?>

<script>
$(document).ready(function(){       
    $('button').click(function() {
        var $button = $(this),
            test = $button.text() === 'DISLIKES';

        if(test)
        {
            $button.text('LIKE');
            test=false;
        }
        else
        {
            $button.text('DISLIKES');
            test=true;
        }
    });
});
</script>

This is pretty basic and will just change the button text. To toggle the icon as well you'd just need to do something like:

$button.addClass('like-class');

or

$button.removeClass('dislike-class');

In the appropriate if block

Check out this fiddle to see it in action

Answer 2

change

 if($('button span').hasClass('glyphicon-chevron-up')) 

to

 if($('button#<?php echo 'change_button_label_' . $counter?> span').hasClass('glyphicon-chevron-up')) 

you are done !