jQueryrotate How to rotate more than 1 image by a cursor - jquery-rotate

Question

I am trying jqueryrotate plugin and simply rotate given image by a cursor. It works
but my question is when I used 2 images with same ID class
rotate only work at first image, how to do make it work separately
http://jsfiddle.nXt/8xwqdk71/
I will use for many images.

Answer 1

You can't have two or more objects / elements with the same id. Modify your code to target a class instead.
<img src="https://www.google.com/images/srpr/logo3w.png" class="image">
var value = 0
$(".image").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
});
.image{
margin:100px 100px;
}
EDIT: In addition, you need to have a rotation-value that isn't globally shared between all the images. The above will give you some interesting spinning effects when you have multiple images.
An updated version is at: http://jsfiddle.net/0nwvt303/
<img src="https://www.google.com/images/srpr/logo3w.png" class="image" rotation=0>
<img src="https://www.google.com/images/srpr/logo3w.png" class="image" rotation=0>
$(".image").rotate({
bind:
{
click: function(){
currRotation = ($(this).attr("rotation") * 1) + 90;
$(this).attr("rotation", currRotation);
$(this).rotate({ animateTo:currRotation });
}
}
});