I am trying to extract some information from a webpage using JS. The structure is that on first page I see the list of all the questions and each question has Delete and Update button on them.

let questionsTr = document.getElementsByTagName("tr")

This fetches all the rows of that table and

const getAll = async () =>{
    let o;
    let q=[];

    for(let i=1;i<10;i++){
        questionsTr[i].getElementsByTagName("button")[0].click();
        o = await fetchOptions();
        console.log(o);
        q.push(o)
    }
    console.log(q);
}

This is the code that iterates in that rows and clicks the update button, then fetchOptions function is called which looks something like this.

const fetchOptions = async  ()=>{
    return new Promise((res,rej)=>{
        let options;
        let textareas = document.getElementsByTagName("textarea");

        // Initialize an array to store the values
        let textareaValues = [];

        // Loop through each textarea and store its value in the array
        for (let i = 0; i < textareas.length; i++) {
            textareaValues.push(textareas[i].value);
        }

        // Output the array of values
        
        let newVals = textareaValues.filter(n => n);
        options = newVals.splice(0,5).join("@")
        document.getElementById("btnClose").click();
        
        // res(console.log(options));
        return options;
    });
}

When the update button is clicked, the new modal that opens has textareas containing 4 options. I am fetching them, removing empty values and then returning them. My problem is that the loop doesn’t wait for the function to return the options variable. it just runs ahead. I tried to call the resolve function and logging the options variable but it doesn’t work. How do I make the loop wait until the new windows opens and the fetchOptions function completes it’s work?