How to run a function for a div every time the span is clicked?

Question

When the "xbutton" is clicked, I want the div to transition so that it rotates, gets smaller and changes opacity to be hidden (and also to set the display of the elemnts inside to none). This works as it should the first time that the "xbutton" is clicked, but on the others, it does not rotate. There is somthing wrong with my JS. CSS:

#addPopUp {
                opacity:1;
                position:absolute;
                width:50px;
                height:50px;
                transition: opacity, width, height, transform;
                transition-timing-function:ease;
                transition-duration:1s;
                display:none;
            }
            #xbutton {
                margin-left: 140px;
                margin-top:-60;
                position:absolute;
                opacity:1;
                transition:color, display,font-size, 0.06s;
            }

HTML:

<div id="addPopUp">
                <h3 id="h3">Select what you would like to add:</h3>
                <span id="xbutton"><strong>&times;</strong></span>
            </div>

JS:

document.getElementById("xbutton").onclick = function() {
               document.getElementById("xbutton").style.display = "none"
               document.getElementById("addPopUp").style.opacity = "0"
               document.getElementById("addPopUp").style.transform = "rotate(360deg)"
               document.getElementById("addPopUp").style.width = "50px"
               document.getElementById("addPopUp").style.height = "50px"
               document.getElementById("h3").style.display = "none"
           }

Answer 1

If you're using CSS animations one important thing to be aware of is that CSS animations won't automatically restart unless you tell them so.

One way to do it is when adding your style you should remove it again so it can apply the style another time.

document.getElementById("xbutton").onclick = function() {
// resetting the styles before the animation begins: 
               document.getElementById("xbutton").style.display = "block"
               document.getElementById("addPopUp").style.opacity = "1"
//etc...
               document.getElementById("xbutton").style.display = "none"
               document.getElementById("addPopUp").style.opacity = "0"
               document.getElementById("addPopUp").style.transform = "rotate(360deg)"
               document.getElementById("addPopUp").style.width = "50px"
               document.getElementById("addPopUp").style.height = "50px"
               document.getElementById("h3").style.display = "none"

           }