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.

Here is a much shorter script. Note the use of template literals

The CSS has also been more streamlined using a custom property

You may want to re-run the script on resize (with debouncing) to get a new document.width

const createDiv = (index, delay) => {
  const divSize = ((Math.random() * 100) + 50).toFixed();
  const posX = (Math.random() * ($(document).width() - divSize)).toFixed();

  $('<div/>', {
    class: `div${index} ${["one", "two", "three", "four", "five", "six"][index]}`,
    css: {
      width: divSize + 'px',
      height: divSize + 'px',
      backgroundColor: '#cfdfe2',
      borderRadius: '5px',
      position: 'absolute',
      left: posX + 'px'
    }
  }).appendTo('body').fadeIn(100).delay(delay).fadeOut(200, function() {
    $(this).remove();
  });
};

[9600, 9600, 8000, 16000, 10000, 12000].forEach((delay, index) => createDiv(index, delay));

* {
    padding: 0;
    margin: 0;
    font-family: "Montserrat", sans-serif;
    color: #d1d1d1;
    overflow: hidden;
}

body {
    height: 100vh;
    width: 100%;
    background: linear-gradient(45deg, rgba(26, 33, 64, 1), #479ab8, rgba(26, 33, 64, 1));
    background-size: 300% 300%;
    animation: color 12s ease-in-out infinite;
}

@keyframes color {
    0%, 100% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes animateDiv {
    0% { opacity: 10%; top: -130px; transform: rotate(0deg); }
    20%, 60% { opacity: 90%; }
    40%, 80% { opacity: 10%; }
    100% { opacity: 90%; top: 150%; transform: rotate(var(--rotate)); }
}

.one { --rotate: 650deg; animation: animateDiv 10s linear forwards; }
.two { --rotate: 450deg; animation: animateDiv 12s linear forwards; }
.three { --rotate: 900deg; animation: animateDiv 9s linear forwards; }
.four { --rotate: 360deg; animation: animateDiv 20s linear forwards; }
.five { --rotate: 1090deg; animation: animateDiv 12s linear forwards; }
.six { --rotate: 840deg; animation: animateDiv 16s linear forwards; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>