Expand image on click doesn't work

Question

I'm trying to expand images on click and found a few solution (except the one I'm looking for).
1) using img:hover {} on css allows to expand the image on hover.
2) using javascript I can expand each picture, but I need a new function for every image, which seems unnecessary to me since I'm making a website containing tons of pictures.
3) using javascript to find out the id of the element clicked and expanding that element, allowing for just 2 functions.
I just haven't been able to do that.

My code is below, don't mind the way everything looks, it's a quick sketch containing all necessary things I currently use in the original code.

In order to make it work smooth I need these steps:
- When any image is clicked, the counting function adds 1
- Then the Grow function checks for the id on clicked element
-Grow function expands the image
- When clicked again, the counting function removes 1
- Then the Grow function checks for the id on clicked element
- Grow function restores the original values of the image

What do I change to make it work?

https://code.sololearn.com/Wa23a2363a23

Answer 1

I edited your code to use Javascript for mapping click event for the images.

https://code.sololearn.com/Wkq5KITgUsm0/?ref=app

Answer 2

Basic fix (adding leading dot at css class name, rewrote of js, correct html onclick attribute -- html is case insensitive, but js is, meaning js expect all lowercase "onclick"):

https://code.sololearn.com/WWbS6eg1tDYZ/?ref=app