I am working on a kiosk screen.  The screen consists of 5 circles that surround an image in the center of the screen.  When one of the 5 circles are clicked everything else fadesout, that circle moves to the center of the screen, grows in size and 8 smaller circles fadein around it.  One of these smaller circles is a back button that when clicked fades the smaller circles out, shrinks the main circle, moves it back to its original location and fades in all of its siblings.  I am having two issues:

1. When a main circle is clicked, you can continue to click it which in turn continues to grow in size, over and over and over an infinite amount of times.

2. When a main circle is clicked, if I click a smaller circle (except for the back) it is causing the same issue where the main circle continues to grow each click. (The hyperlinks are fine when they are live but clicking the div itself is what is causing the problem)

Here is a fiddle that contains the project I am working on:   https://jsfiddle.net/7ca7em00/2/

Any help or guidance would be greatly appreciated!