How can I move a class of div from top to bottom?

Question

What I want is to move all the div's with class "goccia" move from top to bottom together using the setInterval() function.

I can't understand why it is moving only the first element (.goccia)

Here is my JavaScript code.

var campo = document.querySelector('#campo');
var marginTop = 0;

function creaGocce(){
    var numeroGocce = document.querySelector('input').value;
    for (var i = 0; i < numeroGocce; i++) {
       campo.innerHTML += ' <div class = "divGoccia"> <div class = "goccia"> 
    </div> </div>';
    }
}
function scompari(){
    document.querySelector('.contenitore').style.display = 'none';
}
function spostaGocce(){
    var goccia = document.querySelector('.goccia');
    goccia.style.marginTop = marginTop + "px";
    marginTop += 10;
}
function muoviti(){
    scompari();
    creaGocce();
    setInterval(spostaGocce, 1000);
}
document.querySelector('button').addEventListener('click', muoviti);

Answer 1

I suppose you are trying to send down each of your created divs to the bottom.

You should use the css attribute "position: absolute" and "top: 0px" and apply it to campo (the container of the divs) or create a new container. It will be easier.

I would recommend you to check this W3Schools article and try each parameter to know it.

Keep coding!