HTML DIv looses all functionality upon clicking

let achievements = document.getElementsByClassName('achievement');
            
            let viewEl = 1;
            let posY = 0;
            
            function scrollAcievements(direction){
                console.log('ENT');
                if (direction == 'U') {
                    viewEl++;
                    posY -= 300;
                }
                else if (direction == 'D') {
                    viewEl--;
                    posY += 300;
                }

                if (viewEl < 1) {
                    viewEl = 1;
                    posY = 0;
                    return null;
                }
                else if (viewEl > Array.from(achievements).length) {
                    viewEl = Array.from(achievements).length;
                    posY = Array.from(achievements).length*300 - 300;
                    return null;
                }
                
                console.log(viewEl);
                console.log(posY);
                (Array.from(achievements)).forEach(element => {
                    element.style.transform = `translateY(${posY}px)`;
                });
                console.log('EX');
            }

.achievement{
                height: 400px;
                transition: 0.2s;
            }
            .achievements-holder{
                /* transform: translateX(); */
                transition: 0.2s;
                background-color: transparent; 
                position: relative; 
                height: 400px; 
                padding: 50px 10px; 
                margin: 5px;
                overflow-y: hidden;
            }
            .achievements-holder section div{
                display: flex; flex-direction: column; flex-grow: 1;
            }
            .achievements-holder section{
                display: flex;  
                width: 100%;
                /* background-color: #16a34a; */
                height: 300px;
            }

            .achievements-holder .heading{
                background-color: transparent;  font-size: 2.5rem; flex-grow: 1;
            }
            .achievements-holder .data{
                background-color: transparent; text-align: right; margin: 5px;
            }

            .achievements-arrow{
                position: absolute;
                left: 50%;
                transform: rotate(-90deg);
            }
            
            .funky-h3:hover{
                color: #1adb61;    
            }
            .funky-h3{
                font-size: 1.5rem;
                font-family: 'Press Start 2P', cursive;
                margin: 15px 0;
                color: #17c758;
                user-select: none;
            }
 

 
    <script src="https://cdn.tailwindcss.com"></script>
 


    <div class="container px-5 py-24 mx-auto flex-row">

        <h1 class="content-heading" id="aboutme">
            achievements(
        </h1>

        <div class="flex flex-wrap w-full achievements-holder">

            <div class="funky-h3 achievements-arrow" id=" UP" onclick="scrollAcievements('U');">></div>
            <div class="funky-h3 achievements-arrow" id="DOWN" onclick="scrollAcievements('D');" style="bottom: 0%;"><</div>
            
            <section class="flex-row achievement" id="JEE">
                
                <div>
                    <img src="https://img.collegepravesh.com/2015/09/NTA-Logo.png" style="aspect-ratio: 1; width: 100px;" alt="">
                    <h1 class="heading">
                        HEEAD
                    </h1>
                </div>
                <h1 class="funky-h3 data">
                    DATA GAIN
                </h1>
            </section>

            <section class="flex-row achievement" id="WBJEE">
                
                <div>
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/46/West_Bengal_Joint_Entrance_Examinations_Board_Logo.svg/220px-West_Bengal_Joint_Entrance_Examinations_Board_Logo.svg.png" style="aspect-ratio: 1; width: 100px;" alt="">
                    <h1 class="heading">
                        HEAD
                    </h1>
                </div>
                <h1 class="funky-h3 data">
                    STFF 
                </h1>
            </section>

            <section class="flex-row achievement" id="WBJEE">
                
                <div>
                    <img src="https://img.collegepravesh.com/2015/09/NTA-Logo.png" style="aspect-ratio: 1; width: 100px;" alt="">
                    <h1 class="heading">
                        CUET
                    </h1>
                </div>
                <h1 class="funky-h3 data">
                    centile
                </h1>
            </section>

            
            
        </div>
        <h1 class="content-heading" id="aboutme">
            );
        </h1>

 
            
    </div>