On element clone Hide/Show doesn't work on Cloned elements

Question

Hide show only works on first element, Once cloned stopped working.

FIDDLE HERE : https://jsfiddle.net/rmpLvx7h/18/ 

On click on Image , Images should show in the particular div ( clicked element /. This ). Images also does not get updated in every div.

I'm trying to figure it out but nothing worked. Tried Live(), on(), delegate() etc.

Answer 1

In line 72, var clone = original.cloneNode(true); // "deep" clone var clone = original.cloneNode(true); // "deep" clone , note that vanilla Javascript deep cloning does not clone the event listeners that are attached to the original node. This is why the events that are attached to .Play_Start don't get added to the clones. You should use event delegation to listen for events on the .Play_Start elements' parent element, .Counter_Play, or use jQuery's Clone method , which can be used to clone with event handlers.

Answer 2

You are using the same class for all silver boxes which causes the bug. You have a

 $('.empty_box').click(funciton(){

       //Here comes the confusion.

 })

By cloning the html structure of the prototype just change the class to another name for example empty_box1..empty_box2 but you have to apply external logic about doing that maybe add some counter(yes and event listener should be applied foreach new element :))