addEventListener for click wont work

Second click function wont run and i am unsure why. The first one runs fine and dos what it should but the second should allow the user to click on the circle that appears and have an info box show up, but nothing will click im assuming to make said info box appear!

<html>

<head>

    <meta charset="UTF-8">
    <title>POLLENATORS PRESENTATION INFOGRAPHIC APP</title>

    <!-- main css -->
    <link href="css/main.css" rel="stylesheet" type="text/css">

    <!-- load jquery -->
    <script src="js/jquery-latest.min.js"></script>




</head>


<body>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1367 769">
        
        <title>pollen</title>
        
        <!-- BACKGROUND -->
        <g id="background">
</g>
        
        
        <!-- CLOUDS -->
        <g id="clouds">
</g>
        
        <!-- FLOWER ANIMATION AND CLICK -->
        <g id="flower">
</g>
        
        
        <!-- FLOWER PETAL INFO -->
        
         <g id="flowerPetal">
</g>
    
        
        <!-- FLOWER PETAL INFO BUTTON -->
        
    <g id="petalBut">
 </g>
    
        
        <!-- FLOWER LEAVES INFO -->
        
    <g id="flowerLeaves">
</g>
    
        
        <!-- FLOWER LEAVES INFO BUTTON -->
        
    <g id="leafBut">
</g>
    
        
        <!-- FLOWER FRUIT INFO -->
        
    <g id="flowerFruit">
</g>
    
        
        <!-- FLOWER FRUIT INFO BUTTON -->
        
    <g id="fruitBut">
</g>
    
        
        <!-- FLOWER STEM INFO -->
        
    <g id="flowerStem">
</g>
    
        
        <!-- FLOWER STEM INFO BUTTON -->
    <g id="stemBut">
</g>
    
        <!-- FLOWER SEEDS INFO -->
    <g id="flowerSeeds">
</g>
    
        
        <!-- FLOWR SEED INFO BUTTON -->
        
    <g id="seedBut">
</g>
    
        
        <!-- FLOWER ROOTS INFO -->
        
    <g id="flowerRoots">
</g>
    
        
        <!-- FLOWER ROOTS INFO BUTTON -->
        
    <g id="rootBut">
</g>
        
        
        <!-- BEE ANIMATION -->
        <g id="bee">
</g>
        
        
        <!-- BAT ANIMATION -->
        
        <g id="bat">
</g>
        
        
        <!-- BUTTERFLY ANIMATION -->
        
        <g id="butterfly">
</g>
        
        
        <!-- TEXT SPEECH -->
        
        <g id="textSpeech">
</g>
        
        
        <!-- SPIDER ANIMATION AND CLICK -->
        
        <g id="spider">
</g>
        
        
        <!-- MAIN FLOWER INFO -->
        
        <g id="flowerInfo">
</g>
        
        
        <!-- SNAIL ANIMATION -->
        <g id="snail">
</g>
        
        <!-- CLICK FLOWER INSTRUCTIONS -->
        <g id="clickFlower">
</g>
        
        
        <!-- TEXT SPEECH 1 -->
        
        <g id="textSpeech1">
</g>
        
        
        <!-- TEXT SPEECH 2 -->
        <g id="textSpeech2">
 </g>
        
        
        
        <!-- TEXT SPEECH 3 -->
        
        <g id="textSpeech3">
            </g>
        
        
        <!-- TEXT SPEECH 4 -->
        <g id="textSpeech4">
            </g>
        
        
        <!-- TEXT SPEECH 5 -->
        <g id="textSpeech5">
</g>
        
        
        <!-- TEXT SPEECH 6 -->
        <g id="textSpeech6">
</g>
        
        <!-- TEXT SPEECH 7 -->
        <g id="textSpeech7">
</g>
    
    </svg>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>
window.onload = function () 
{
    "use strict"

    var myBee = document.getElementById('bee');

    var myBat = document.getElementById('bat');

    var mySpider = document.getElementById('spider');

    var myFlower = document.getElementById('flower');

    var flowerPetal = document.getElementById('flowerPetal');

    var petalButton = document.getElementById('petalBut');

    var flowerLeaves = document.getElementById('flowerLeaves');

    var leafButton = document.getElementById('leafBut');

    var flowerFruit = document.getElementById('flowerFruit');

    var fruitBut = document.getElementById('fruitBut');


    var flowerStem = document.getElementById('flowerStem');

    var stemBut = document.getElementById('stemBut');

    var flowerSeeds = document.getElementById('flowerSeeds');

    var seedBut = document.getElementById('seedBut');

    var flowerRoots = document.getElementById('flowerRoots');

    var rootBut = document.getElementById('rootBut');

    var mySnail = document.getElementById('snail');

    var myButter = document.getElementById('butterfly');

    var textSpeech = document.getElementById('textSpeech');

    var textSpeech1 = document.getElementById('textSpeech1');

    var textSpeech2 = document.getElementById('textSpeech2');

    var textSpeech3 = document.getElementById('textSpeech3');

    var textSpeech4 = document.getElementById('textSpeech4');

    var textSpeech5 = document.getElementById('textSpeech5');

    var textSpeech6 = document.getElementById('textSpeech6');

    var textSpeech7 = document.getElementById('textSpeech7');

    var flowerClick = document.getElementById('clickFlower');

    var flowerInfo = document.getElementById('flowerInfo');



    TweenMax.to(myBee, 0, {
        opacity: 0
    });


    TweenMax.to(myFlower, 0, {
        opacity: 0
    });

    TweenMax.to(flowerPetal, 0, {
        opacity: 0
    });


    TweenMax.to(petalButton, 0, {
        opacity: 0
    });


    TweenMax.to(flowerLeaves, 0, {
        opacity: 0
    });


    TweenMax.to(leafButton, 0, {
        opacity: 0
    });


    TweenMax.to(flowerFruit, 0, {
        opacity: 0
    });

    TweenMax.to(fruitBut, 0, {
        opacity: 0
    });

    TweenMax.to(flowerStem, 0, {
        opacity: 0
    });

    TweenMax.to(stemBut, 0, {
        opacity: 0
    });

    TweenMax.to(flowerSeeds, 0, {
        opacity: 0
    });

    TweenMax.to(seedBut, 0, {
        opacity: 0
    });

    TweenMax.to(flowerRoots, 0, {
        opacity: 0
    });

    TweenMax.to(rootBut, 0, {
        opacity: 0
    });

    TweenMax.to(myBat, 0, {
        opacity: 0
    });

    TweenMax.to(myButter, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech1, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech2, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech3, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech4, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech5, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech6, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech7, 0, {
        opacity: 0
    });

    TweenMax.to(flowerClick, 0, {
        opacity: 0
    });


    TweenMax.to(mySnail, 0, {
        opacity: 0
    });


    TweenMax.from(mySpider, 4, {
        y: -100
    });

    TweenMax.to(mySpider, 4, {
        y: 0
    });

    TweenMax.from(flowerInfo, 4, {
        y: -100
    });

    TweenMax.to(flowerInfo, 4, {
        y: 0
    });


    mySpider.addEventListener("click", function () {

        TweenMax.to(mySpider, 3, {
            opacity: 0
        });

        TweenMax.to(flowerInfo, 3, {
            opacity: 0
        });

        TweenMax.from(myFlower, 3, {
            y: 800

        });

        TweenMax.to(myFlower, 3, {
            y: -10,
            opacity: 1

        });

        TweenMax.from(mySnail, 3, {
            x: 300,
            opacity: 1,
            delay: 2

        });

        TweenMax.to(mySnail, 3, {
            x: 20,
            opacity: 1,
            delay: 2

        });

        TweenMax.from(flowerClick, 3, {

            opacity: 0,
            delay: 3

        });

        TweenMax.to(flowerClick, 3, {

            opacity: 1,
            delay: 3

        });


        TweenMax.to(petalButton, 3, {

            opacity: 1,
            delay: 3.5,
            x: 75
        });
        TweenMax.to(leafButton, 3, {

            opacity: 1,
            delay: 3.5,
            x: 50
        });

        TweenMax.to(rootBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 100
        });

        TweenMax.to(fruitBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 100
        });

        TweenMax.to(seedBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 30
        });

        TweenMax.to(stemBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 40
        });


    });

    petalButton.addEventListener("click", function () {

        TweenMax.to(flowerPetal, 3, {
            opacity: 1
        });
    });
};

When I try to implement your code shown, I only see a blank page. There are no buttons.

Do you have this project on GitHub, so I can download and test the full code?

https://jsfiddle.net/o589zmqk/

I only see one click event in the JS code

mySpider.addEventListener("click", function () {

What element click are you referring to that does work vs. the element click that does not work?

petalButton.addEventListener("click", function () {

        TweenMax.to(flowerPetal, 3, {
            opacity: 1
        });

is the one that wont work

You onload function never runs. It has to be an IIFE.

window.onload = (function() {

})();

There is no event listener on the element in the jsfiddle you linked to. In any case you have a stacking context issue, the easiest solution is to just move the button to the bottom of the svg element.

https://jsfiddle.net/5qc0k19f/

Side note: you really have to simplify your paths. Look into some different solutions (some depend on the software you use).