Reappear bubbles js and css-CodePudding

I'm trying to solve this problem, but I'm giving up and I'm here to see if you can give me some hints. I made this bubble effect in which when I touch each bubble it pops, but I can't get the bubbles to reappear after a few seconds (as if they were new bubbles). I leave the code here below:

 link: https://codepen.io/tomas-saint-romain/details/LYdaMRG

CodePudding user response：

You dont need all of those functions,just one will be enough

    const changeStyleToBubble = (id) => {

      //we get the id directly from the html element,as parameter
      const element = document.getElementById(id);
      element.style.opacity = "0";
      
      //set it back to 1 after 2 seconds (2000 ms)
      setTimeout(() => {
        element.style.opacity = "1";
      }, 2000)

    }

HTML

<button id="pop2" onclick="changeStyleToBubble(this.id)" >