jQuery this selector not working on Image

Question

Ok, I have a bunch of images with the same ID of "mashupButton", however I was under the impression that if I make a jQuery click function using "this", instead of "#mashupButton" it would only perform the function on the image clicked. This works for me, but only for the first image with that ID on the page, and after I've done it once, it no longer works.

After document is ready:

$("#mashupButton").click(function()
                {
                    $(this).effect("drop", {direction:"up"}, 1000);
                });

Tag is like:

<a href="#" onClick="differentFunction"><img src="imagename.png" id="mashupButton"></a>

So to clarify: I have say 10 images all with the ID mashupButton - I have a jQuery effect that is performed on that specific image when it is clicked. However it only works on the FIRST of those images, even though they all contain the same ID. Do I need to have unique ID's for each one, or can it be achieved this way somehow?

Answer 1

The values for "id" attributes must be unique within a page. It is not correct markup to re-use "mashupButton" as the "id" for a "bunch" of images. Each <img> tag must have its own unique "id" (or no "id" at all, of course). You could use the "class" attribute to mark such <img> elements as being candidates for your "click" handler, of course.

Answer 2

I have say 10 images all with the ID mashupButton

It is illegal to have more than one element with the same id.

If you want to use one selector, you should add a classname.