MeatBalls problem js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meet balls</title>

    <style>
        .container .row {
            display: flex;
            justify-content: space-around;
        }

        .circle {
            border-radius: 50%;
            background-color: aquamarine;
            height: 1000px;
            width: 1000px;
        }

        .size-1 {
            width: calc(30px * 1);
            height: calc(30px * 1);
        }

        .size-2 {
            width: calc(30px * 2);
            height: calc(30px * 2);
        }

        .size-3 {
            width: calc(30px * 3);
            height: calc(30px * 3);
        }

        .size-4 {
            width: calc(30px * 4);
            height: calc(30px * 4);
        }

        .size-5 {
            width: calc(30px * 5);
            height: calc(30px * 5);
        }

        .size-6 {
            width: calc(30px * 6);
            height: calc(30px * 6);
        }

        .size-7 {
            width: calc(30px * 7);
            height: calc(30px * 7);
        }

        .size-8 {
            width: calc(30px * 8);
            height: calc(30px * 8);
        }

        .size-9 {
            width: calc(30px * 9);
            height: calc(30px * 9);
        }

        .size-10 {
            width: calc(30px * 10);
            height: calc(30px * 10);
        }
    </style>
</head>

<body>
    <main class="container">
        <section class="row" id="circles-container">
            <!-- ** circles here ** -->
        </section>
    </main>

    <script>
        const renderCircle = (size = false) => {
            return `
                <div class="circle size-${size}"></div>
            `;
        }

        const generateRandom = (min, max) => {
            return Math.floor(((Math.random() * (2 << 24)) % max) + min);
        }

        const generatedCirclesSizes = [...Array(5)]
            .map(item => (
                generateRandom(1, 10)
            ));

        function renderCircles(doSorting) {
            if (doSorting) {
                generatedCirclesSizes.sort((a, b) => a - b);
            }

            const generatedCircles = generatedCirclesSizes.map(renderCircle);

            // console.log(generatedCircles);

            const circlesContainer = document
                .querySelector("#circles-container")
                .innerHTML = generatedCircles.join("");
        }

        renderCircles();
    </script>

    <button onclick="renderCircles(true)">Sort me</button>
</body>

</html>