How to get this glass shatter effect to work on multiple divs?

Question

Situation

I have this glass shatter effect simulation that involves some basic javacsript code and right now it works fine; When you click on the logo, the glass shatters accordingly and then a new unshattered logo re-appears in its place.

Take a look at the jSFiddle here: https://fiddle.jshell.net/9n9ft9ks/3/

Problem

Right now, there's only one logo on the page. I need there to be more than one logo, probably like five (of the same Floyd's autoglass logos) all on the same page, all with the same onClick glass shatter effect. But when I try to do this myself - put more than one (of the same logo) on the page, the code just breaks.

How I tried to fix it

The logo with the glass shatter effect is a div called "#container". So since I want more than one of these logo's on the page, I tried just duplacting "<div id="container"></div>" a bunch of times in the HTML code. That didn't work: https://fiddle.jshell.net/9n9ft9ks/5/

So I tried changing the div id into a div class and I edited all the appropriate javascript & CSS lines that needed to be changed like:

document.getElementById('container'); to: document.getElementsByClassName('container');

and

#container: {} to .container{}

But that didn't seem to work for me either. The logo doesn't even show up on the page anymore after making these changes, take a look here: https://fiddle.jshell.net/9n9ft9ks/4/

Summary

I have a logo with an onClick glass shatter effect. There is only one logo on the page. I need there to be more than one on the page, but can't seem to get it to work myself... If anyone could take a look at the code and try to get it to work so there is more than one logo on the page, i would appreciate it so much! Here is the original jSfiddle one more time: https://fiddle.jshell.net/9n9ft9ks/3/

Answer 1

You cannot use a single ID multiple times on the same page.
Use a class instead:

CSS:

.className {
    /* attributes: values; */
}

HTML:

<div class="className"></div>