Not able to increase the width of a div using Vanilla JS when I am using getElementsbyClassName

Question

I am trying to increase the width of a div on click. It works when I capture an element using getElementbyID. However, when I use getElementbyClassName, it generates the error: "Uncaught TypeError: Cannot read property of 'style' undefined clicked[initial]". Please help.

HTML code: Trying to increase the elements with className content on click.

<div class="content-section">
            <div class="content-side">  
                <div class="content" data-aos="fade-left">
                    <p></p>
                </div>
                <div class="content" data-aos="fade-left">
                    <p></p>
                </div>
                <div class="content" data-aos="fade-left">
                    <p></p>
                </div>
                <div class="content" data-aos="fade-left">
                    <p></p>
                </div>
                <div class="content" data-aos="fade-left">
                    <p></p>
                </div>
                <div class="content" data-aos="fade-left">
                    <p></p>
                </div>
                <div class="content" data-aos="fade-left">
                    <p></p>
                </div>
                <div class="content" data-aos="fade-left">
                    <p></p>
                </div>
                <div class="content" data-aos="fade-left">
                    <p></p>
                </div>
            </div>
        </div>

JS:

 var clicked=document.getElementsByClassName("content");
 var totalBoxes=clicked.length;
 var initial=0;


 while(initial<totalBoxes){
     clicked[initial].addEventListener("click", function(){
         clicked[initial].style.width="80vw";
     });
     initial++;
 }

I have applied the CSS and it looks like this without JS: plain HTML CSS look without JS I want each of those boxes to increase their width on click.

Please help!