Expand/Collapse based on number of Section Blocks

[Shamilton44]

I have created a new section where I am adding multiple content blocks but have run into an issue that I am hoping for some help with. 

I'd like to add functionality where the first 6 content blocks are added to the page and anything over 6 gets put behind a Show More/ Show Less button to expand & collapse the content. 

For ease, I've simplified the content that gets written just to show as an example.

<section class="super-category2">
    {% assign count = 0 %}
    {% for block in section.blocks %}
        {% assign count = count | plus: 1 %}
        <div>Create Content</div>
    {% endfor %}
</section>

I saw an example of a script that I just can't get to work properly. In this case, I just have the size integer sset to 4 to try and force it on my dummy content.

<script>
    document.addEventListener('DOMContentLoaded', function() {
    const section = document.querySelector('.super-category2');

    if (section.blocks.size >= 4 ) {
        // Create a button element
        const button = document.createElement('button');
        button.textContent = 'Show More';
        button.classList.add('expand-collapse-button');

        // Insert the button before the section
        section.parentNode.insertBefore(button, section);

        // Initially hide blocks beyond the first 4
        for (let i = 4; i < section.blocks.size; i++) {
            section.blocks[i].style.display = 'none';
        }

        // Add click event listener to the button
        button.addEventListener('click', function() {
            const isExpanded = this.textContent === 'Show More';

            for (let i = 4; i < section.blocks.size; i++) {
                section.blocks[i].style.display = isExpanded ? 'block' : 'none';
            }

            this.textContent = isExpanded ? 'Show Less' : 'Show More';
        });
    }
});
</script>

Any help would be appreciated.