jQuery Animated-Background/ Generate divs with random positioning and size

I have written a code with jQuery that generates six squares (divs). Each one of them has random size and positioning. I apply to each one a different css class in order to perform a slightly different animation. The program runs the way I want it to, but there’s a lot of repetitiveness to it. I can’t help to think it can be better optimized. I appreciate all the help and tips you can give me

//Generate a div with random width height
    var divsizeOne = ((Math.random()*100) + 50).toFixed();
    $newdivOne = $('<div/>').css({
        'width':divsizeOne+'px',
        'height':divsizeOne+'px',
        'background-color': '#cfdfe2',
        'border-radius':'5px'
    });
    var divsizeTwo = ((Math.random()*100) + 50).toFixed();
    $newdivTwo = $('<div/>').css({
        'width':divsizeTwo+'px',
        'height':divsizeTwo+'px',
        'background-color': '#cfdfe2',
        'border-radius':'5px'
    });
    var divsizeThree = ((Math.random()*100) + 50).toFixed();
    $newdivThree = $('<div/>').css({
        'width':divsizeThree+'px',
        'height':divsizeThree+'px',
        'background-color': '#cfdfe2',
        'border-radius':'5px'
    });
    var divsizeFour = ((Math.random()*100) + 50).toFixed();
    $newdivFour = $('<div/>').css({
        'width':divsizeFour+'px',
        'height':divsizeFour+'px',
        'background-color': '#cfdfe2',
        'border-radius':'5px'
    });
    var divsizeFive = ((Math.random()*100) + 50).toFixed();
    $newdivFive = $('<div/>').css({
        'width':divsizeFive+'px',
        'height':divsizeFive+'px',
        'background-color': '#cfdfe2',
        'border-radius':'5px'
    });
    var divsizeSix = ((Math.random()*100) + 50).toFixed();
    $newdivSix = $('<div/>').css({
        'width':divsizeSix+'px',
        'height':divsizeSix+'px',
        'background-color': '#cfdfe2',
        'border-radius':'5px'
    });


    //Genarate random position for divs
    var posxOne = (Math.random() * ($(document).width() - divsizeOne)).toFixed();
    var posxTwo = (Math.random() * ($(document).width() - divsizeTwo)).toFixed();
    var posxThree = (Math.random() * ($(document).width() - divsizeThree)).toFixed();
    var posxFour = (Math.random() * ($(document).width() - divsizeFour)).toFixed();
    var posxFive = (Math.random() * ($(document).width() - divsizeFive)).toFixed();
    var posxSix = (Math.random() * ($(document).width() - divsizeSix)).toFixed();


    $newdivOne.addClass( "one" );
    $newdivTwo.addClass( "two" );
    $newdivThree.addClass( "three" );
    $newdivFour.addClass( "four" );
    $newdivFive.addClass( "five" );
    $newdivSix.addClass( "six" );

    $newdivOne.css({
        'position':'absolute',
        'left':posxOne+'px'
    }).appendTo( 'body' ).fadeIn(100).delay(9600).fadeOut(200, function(){
       $(this).remove(); 
    });

    $newdivTwo.css({
        'position':'absolute',
        'left':posxTwo+'px'
    }).appendTo( 'body' ).fadeIn(100).delay(9600).fadeOut(200, function(){
       $(this).remove();
    });

    $newdivThree.css({
        'position':'absolute',
        'left':posxThree+'px'
    }).appendTo( 'body' ).fadeIn(100).delay(8000).fadeOut(200, function(){
       $(this).remove();
       makeDiv();
    });

    $newdivFour.css({
        'position':'absolute',
        'left':posxFour+'px'
    }).appendTo( 'body' ).fadeIn(100).delay(16000).fadeOut(200, function(){
       $(this).remove();

    });

    $newdivFive.css({
        'position':'absolute',
        'left':posxFive+'px'
    }).appendTo( 'body' ).fadeIn(100).delay(10000).fadeOut(200, function(){
       $(this).remove(); 
    });

    $newdivSix.css({
        'position':'absolute',
        'left':posxSix+'px'
    }).appendTo( 'body' ).fadeIn(100).delay(12000).fadeOut(200, function(){
       $(this).remove();
    });

})();

https://codepen.io/Jim-Koum/pen/poXWXVw
I have uploaded my code at CodePen. You can go check it out so you can understand better what I’m trying to achieve.