Dynamically generate copies of DOM element and animate randomly with Greensock

I am trying to do the following with plain JS but can't get the for loop to work properly:

Objective: To fill the banner div with dynamically generated 'dot' divs that are placed at random positioned, then animate alpha in and out at random times.

http://ift.tt/2fxxI1N

var width = 300;
var height = 250;

function stars_tl() {
var banner = document.getElementById('banner'),
    star = document.getElementsByClassName('dot'),
    tl = new TimelineMax();

    for(var i=0; i<300; i++) {
     //console.log(i);
     banner.appendChild(star);
     var stars = star[i];

      TweenMax.set(stars, {
      autoAlpha:0,
      y:Math.random()*height,
      x:Math.random()*width
      });

      tl.to(stars, 0.5, {autoAlpha:1, yoyo:true, repeat:1}, 
      Math.random());

     }
}