removing items from Isotope container

Question

If you go to this page, you can search for artists to subscribe to, then subscribe to an artist in the search results by clicking 'subscribe'.

If you subscribe to an artist, then try to unsubcribe, the artist is not removed from the list, but the second time you click the unsubscribe button, they are removed.

The list of subscribed artists is stored in an Isotope container referenced by the global variable SF.container.

An artist is added to the container when a user subscribes by calling

SF.subscribe = function(artistSelector, newArtist) {
    var subscribedArtist = $(newArtist);
    SF.container.append( subscribedArtist ).isotope( 'appended', subscribedArtist );
}

An artist is removed from the container by calling

SF.unsubscribe = function(selector) {
    SF.container.isotope('remove', $(selector));
};

The same parameter value is passed into this function each time 'unsubscribe' is clicked, so I don't know why it works the second time, but not the first.

The problem only occurs if you subscribe to an artist then try to unsubscribe without refreshing the page, i.e. there is no problem unsubscribing from the artists that are in the page when it first loads. The functions referenced above are in global.js.

Answer 1

The artist's div in the search results is removed, instead, when you click the first time... Both the div in the search results and the div in the subscriptions have the same id. Suggest making the id's different for the subscription ones