Kinetic JS - Layering Issue - html

Question

I've two different stages on top of another.
And, I'm adding layers to them and placed two image objects.
Now, I've given "click" event to those image objects.
However, since recently added layer is on top of other layers, Only top layer is triggering the events.
Problem : Clicking on purple indicator , I'm getting the alert. But, yellow indicator does not trigger any event since it is behind the layer.
(Check JSFiddle Link which is provided at the bottom)
How to overcome this issue..?
Here is the code sample that I'm using to add & position the image.
Working JS Fiddle Link : http://jsfiddle.net/v4u2chat/aqf9Y/8/
NOTE : Use the Slider to change the position of the image.
Image Positioning Code
$function positionImage(stage,centerX,centerY,radius,startingAngle,endingAngle,targetValue4ImagePositioning,divIdvalue)
{
var imgLayer = new Kinetic.Layer();
var angleInDegress = 360*targetValue4ImagePositioning-90-5;
var angleInRadians = (Math.PI/180)*angleInDegress;
imgLayer.rotate((Math.PI/180)*(360*targetValue4ImagePositioning));
var arcEndX = centerX+ ((radius+25)*Math.cos(angleInRadians));
var arcEndY = centerY+ ((radius+25)*Math.sin(angleInRadians));
imgLayer.setX(arcEndX);
imgLayer.setY(arcEndY);
var kineticImage = new Kinetic.Image(
{
x: 0
,y: 0
,width:18
,height:22
,image: $('#'+divIdvalue)[0]
,id:'kineticImage_'+divIdvalue
});
kineticImage.on("click", callBackFn);
imgLayer.add(kineticImage);
stage.add(imgLayer);
}

Answer 1

Thanks **Steve** for your input.
The actual problem lies in Stage. I'm using two different stages which is not required.
Now, I changed my code to single Stage and it works like charm :)
Layer will not occupy the whole canvas area. It'll occupy only the area of the shape for which we have created the layer. So, No fuss or problem with Layers.
Updated JS Fiddle can be found from the below mentioned link.
http://jsfiddle.net/v4u2chat/aqf9Y/9/