Hello i am trying to make multiple balls fly across the screen random speed/location and changing random colour. I am coding it in javaScript/jQuery. 

I have gotten one dot(div) to move random and change color, but can't create another div with the same functions - do you have a suggestion? (i am quite a noob and have just started javaScript/jQuery)

My code: 

```
<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>balls</title>

<style>

.flip
{
width: 200px;
height: 200px;
border-radius:300px;
position:absolute;
}
.flip2
{
width: 100px;
height: 100px;
border-radius:300px;
position:absolute;
}

</style>

</head>

<body>

<div class="flip"></div>

<div class="flip2"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(document).ready(function(){
    animateDiv();    
});

function makeNewPosition(){
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];       
};

function animateDiv(){
    var newq = makeNewPosition();
    $('.flip').animate({ top: newq[0], left: newq[1] }, function(){
      animateDiv(); 

    $(this).css("background-color", getRandomColor());         
    });   
};

function animateDiv(){
    var newq = makeNewPosition();
    $('.flip2').animate({ top: newq[0], left: newq[1] }, function(){
      animateDiv(); 

    $(this).css("background-color", getRandomColor());         
    });

};

function getRandomColor() { 
var letters = '0123456789ABCDEF'.split(''); 
var color = '#'; 
for (var i = 0; i < 6; i++ ) 
{ color += letters[Math.floor(Math.random() * 16)]; 

    } 

return color; 

};

</script>

</body></html>

```