Iterate through buttons by class and display data from parent div of the selected button in a modal

I have been trying for days now to figure out what I am doing wrong here. I have buttons for items that are located on different pages and they all use the same modal that contains a form and item details, depending on which button is selected.

The buttons have the same class and when clicked I need to get the attributes from the button's parent div (several divs above the button) and display the data from parent div in the modal. I am using Wordpress and I cannot add the attributes to the buttons, so I had to add them to a parent div.

I can get the code to work perfectly in visual studio but when I add it to Wordpress I keep getting errors in the console stating "Can't create duplicate variable that shadows a global property: 'l'" and "Can't create duplicate variable: 'modalBtns'". I cannot use button onclick for the buttons as Wordpress restricts that from what I have read, so I have to do it another way.

I have scoured Google and tried every suggestion I have found on this site and many others. I renamed 'modalBtns', broke code down into functions and put the functions outside the loop, added the functions inside the loop, changed modalBtns to var, constant..nothing is working. I don't know how to clear the errors.

I am also having issue with the modal not getting the data as the code has already ran prior to the modal loading so the id's for the modal divs I am putting the data in are not even present when code runs. I have to add item name to a hidden field of the form and add image, price, description. I tried delaying the code in the section where it is looking for modal divs but it still doesn't work.

This is what I have that works in Visual Studio but not on Wordpress. I don't know what I am doing wrong.

        <div class="modalBtn" data-pkg="Package #1" data-price="124" data-duration="month" data-desc="This + that" data-img="main">
            <div id="otherDiv">
                <button id="Package1" class="premium-price-pricing-button">Package 1</button>
            </div>
        </div>
        <div class="modalBtn" data-pkg="Package #2" data-price="234" data-duration="month" data-desc="Another descrpition" data-img="thumbnail">
            <div id="otherDiv">
                <button id="Package2" class="premium-price-pricing-button">Package 2</button>
            </div>
        </div>
        <div class="modalBtn" data-pkg="Package #3" data-price="345" data-duration="each" data-desc="" data-img="custom">
            <div id="otherDiv"></div>           
                <button id="Package3" class="premium-price-pricing-button" >Package 3</button>
            </div>
        <div id="modal">
            <h1 id="modalTitle">This is the title</h1>
            <img id="modalImg" src="defaultImg.png"/>
            <p><span id="modalPrice">100</span><span id="modalDuration">month</span><span id="modalDesc">Description here</span></p>
        
            <form action="/action_page.php">
                <label for="name">First name:</label><br>
                <input type="text" id="name" name="name" value="John"><br>
                <label for="pkg">Package:</label><br>
                <input type="text" id="pkg" class="pkgFormField" name="pkg" value="Doe"><br><br>
                <input type="submit" value="Submit">
              </form> 
        </div>

This is the code

    //Get all buttons with classname premium-price-pricing-button
    let modalBtns = document.getElementsByClassName('premium-price-pricing-button');

    //Iterate through buttons & add event listener, when clicked run updateModal function
    for (var i = 0; i < modalBtns.length; i++) {
        modalBtns[i].addEventListener('click', updateModal);
    
    }

    function updateModal() {
        //Get parent div which has data attributes
        let parentDiv = this.closest('.modalBtn');
        
        //Get/set attribute data-pkg from parent and set as pkg
        let pkg = parentDiv.getAttribute("data-pkg");

        //Get/set variables from parent attributes
        let price= parentDiv.getAttribute("data-price"); 
        let duration = parentDiv.getAttribute("data-duration");
        let desc = parentDiv.getAttribute("data-desc");
        let btnImg = parentDiv.getAttribute("data-img");
        let modalImg = document.getElementById("modalImg");

        //Find hidden form field & name field
        let pkgField = document.getElementById("pkg");
        let nameField = document.getElementById("name");
        
        //Set default image for modal
        let img = "image1.png";


        //Find modal ids and replace innerHTML with parent attributes
        document.getElementById("modalTitle").innerHTML = pkg;
        document.getElementById("modalPrice").innerHTML = price;
        document.getElementById("modalDuration").innerHTML = duration;
        document.getElementById("modalDesc").innerHTML = desc;

        //If img attribute is 'custom' or 'thumbnail' replace it with alternate image
        if (btnImg == "custom"){
            img = "image2.png";
        }
        if (btnImg == "thumbnail") {
            img = "image3.png";            
        }

        //Set img for modal
        modalImg.src  = img;

        //Set pkg value in form to pkg
        pkgField.value = pkg;
    }