Question

I’ve got a list of buttons with the same class and dynamic IDs. When user clicks the button, I want the text of that button to change to “Added”. The rest of the function works fine, but the success result is not changing at all. Before I had the success result as:

$('.addalbum').text('Added'); 

but it changed every button on the list to added. I only want the button to change that is next to the item that was selected. I’m trying to access the button’s id in the selector, but no dice so far.

jQuery

$('.addalbum').click(function() {

        var album_id = $('.addalbum').attr('id');

        $.ajax({
                    url: '/album/addAlbumToList',
                    type: 'POST',
                    data: data-is-here,
                    success: function (result) {
                        $('.addalbum' + album_id).text('Added');                    
                    }
                });
        e.preventDefault();
});

HTML/PHP

<button class="addalbum" id="add<?php echo $a->album_id; ?>">Add album</button>
so the IDs are #add123, #add124, etc.

Answer 1

Inside the click handler you can refer to the item itself using $(this), so instead of this:

var album_id = $('.addalbum').attr('id');

You would write this:

var album_id = $(this).attr('id');

You could also create a variable for it, since you’re using it in a few places:

var $album = $(this),
album_id = $album.attr('id');

// success handler
$album.text('Added');

I’m using $album here to indicate it’s a jQuery collection