$(document).ready(function () {
var i = 0;
$(".fox").on('click',function(){
   console.log("hi");
   $("#quantity > span").text(i++);
});
});

(function() {
        var NUMBER_OF_ANIMALS = 10;

        function initialize() {
            /* Get a reference to the element that will contain the animals */
            var container = document.getElementById('animals');

            /* Fill the empty container with new animals */
            try {
                for (var i = 0; i < NUMBER_OF_ANIMALS; i++) {
                    container.appendChild(createAnimal());
                }
            }
            catch(e) {
            }
        }

        function randomInt(low, high) {
            return low + Math.floor(Math.random() * (high - low));
        }

        function randomFlt(low, high) {
            return low + Math.random() * (high - low);
        }

        function pixelVal(val) {
            return val + 'px';
        }

        function durationVal(val) {
            return val + 's';
        }

        /*
         Uses an img element to create each animal. 
         */
        function createAnimal() {
            /* Start by creating a wrapper div, and an empty img element */
            var animalDiv = document.createElement('div');
            var image = document.createElement('img');

            /* Randomly choose an animal image and assign it to the newly created element */
            image.src ='https://pngimage.net/wp-content/uploads/2018/05/cute-animals-png-4.png';
        
            image.style.width = randomInt(7, 20) + 'vw';
            image.className = 'fox';

            /* Position the animal at a random location along the screen */
            animalDiv.style.top = pixelVal(randomInt(-100, -250));
            animalDiv.style.left = randomInt(0, 60) + 'vw';

            /* Set the -webkit-animation-name property with these values */
            animalDiv.style.webkitAnimationName ='fade, drop';
            animalDiv.style.animationName ='fade, drop';

            var fadeAndDropDuration = durationVal(randomFlt(1.2, 8.2));
            animalDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
            animalDiv.style.animationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

            var animalDelay = durationVal(randomFlt(0, 1));
            animalDiv.style.webkitAnimationDelay = animalDelay + ', ' + animalDelay;
            animalDiv.style.animationDelay = animalDelay + ', ' + animalDelay;
            
            animalDiv.appendChild(image);
            return animalDiv;
        }
        initialize();
    }
)();

.fox {
  z-index: 100;
}

#animals {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 98;
        }
        #animals > div {
            position: relative;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: normal, normal;
            -webkit-animation-timing-function: linear, ease-in;
            -webkit-backface-visibility: hidden;
            animation-iteration-count: infinite;
            animation-direction: normal, normal;
            animation-timing-function: linear, ease-in;
            backface-visibility: hidden;
        }
        #animals > div > img {
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: linear;
            -webkit-backface-visibility: hidden;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: linear;
        }
        @-webkit-keyframes fade {
            0%, 90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes fade {
            0%, 90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @-webkit-keyframes drop {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(0, 1100px, 0);
            }
        }
        @keyframes drop {
            0% {
                transform: translate3d(0, 0, 0);
            }
            100% {
                transform: translate3d(0, 1100px, 0);
            }
        }
        .quantity{
            position: absolute;
            left: 0;
            right: 0;
            text-align: center;
            top: 100px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animals"></div>
        <img src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pf-misctexture01-beer-000_5.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=c1552a7bdc2ea7b6e17d8d0d893c15be" class="background" style="width: 100%; position: relative;">
<div class="quantity" id="quantity">Total quantity: <span class="animal-quantity">0</span></div>