Click and Download not working on all elements in NodeList

I’m trying to scrape some files off of a website which has files organized like this:

<div id="CourseContent">
            <div class="tab-content coursecontentnotes" id="content_210485ac8-16e8-11ed-9075-0a45a3083c9c">

            <!-- Text Content -->
            <!-- End Text Content -->
            <!-- Video Content -->
            <!-- Video Content End -->
            <!-- File Content Start -->
            
                        <div class="content-type-area">
                            <div class="row">
                                <div class="col-md-12">
                                    <div href="javascript:void(0)" class="link-preview" onclick="downloadcoursedoc(&#39;4d2d6bd0-077a-4bda-80be-cf7483c9f606&#39;)">
                                         <span class="pesu-icon-unlink" aria-hidden="true"></span>
                                            Web Form 2.0 &amp; Form Controls
                                         <span class="pesu-icon-arr-right pull-right" aria-hidden="true"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                 
                <!-- File Content End -->
                <!-- Web Link Content End -->    
                <!-- Web Link Content End -->
                <!-- Text Content -->
                <!-- End Text Content -->
                <!-- Video Content -->
                <!-- Video Content End -->
                <!-- File Content Start -->
            
                        <div class="content-type-area">
                            <div class="row">
                                <div class="col-md-12">
                                    <div href="javascript:void(0)" class="link-preview" onclick="downloadcoursedoc(&#39;a7bdfc1e-d7cd-40ac-9b02-a688fc684e6e&#39;)">
                                         <span class="pesu-icon-unlink" aria-hidden="true"></span>
                                            HTML5 (New Tags, Inputs, Elements and Controls),
                                         <span class="pesu-icon-arr-right pull-right" aria-hidden="true"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                 
                <!-- File Content End -->
                <!-- Web Link Content End -->    
                <!-- Web Link Content End -->
                
            <!-- END of for loop -->

            <!-- For Study Material -->
            <!-- End of Study Material -->
            <!-- For Forums -->
            <!-- For Forums End -->
        
        </div>

The code I used in puppeteer’s page.evaluate function is as follows:

let downloadObj = document.querySelectorAll(
          "#CourseContent .tab-content .content-type-area div"
        );
        // filter selected elements belonging to same content row
        downloadObj = Array.from(downloadObj).filter((el) =>
          el.querySelector(".col-md-12")
        );
        downloadObj.forEach((ele) => {
            eval(ele.querySelector(".link-preview").getAttribute("onclick"));
        });

The problem is, only only the second file is getting downloaded.

But if I manually do

eval(downloadObj[0].querySelector(".link-preview").getAttribute("onclick"));

the file downloads normally.

Does this have to do something with the click opening a new tab?

Thank you for your time.