Personally for me, the result that came from the second icon click must be the default browsers behaviour because you have stacked 4 divs(.day) one over another.
Why you can click on the second icon for the first time?
Maybe when you doesn't have any z-index property for absolute/relative/fixed elems modern browsers is trying to show the triggerable elems on top on the 'neutral' ones.
Why you can't click on the second icon again?
When you click on the second icon, the animations add transform property to the latest 3 divs which imperatives tell the browser to handle the z-index (read the docs for more info - http://dev.w3.org/csswg/css-transforms/#transform-rendering).
If you check your example in older browsers I'm pretty sure that none of the icons would be clickable because the latest .day will stay alway on top.
How to fix it?
There are a lot of solutions but I would recommend you:
to reset the z-index (set a z-index: 1; for example to all .day to prevent strange and unexpected behaviour) and move the icons outside of the divs.
p.s. Sorry for my bad English
