await json data in url opening loop

Question

I am currently running a for loop that takes in A users data for the item name and colour for a clothing product he wishes to purchase..

I am creating a loop to run as many times as the amount of items the user specifies/ putts in..

This loop goes to a JSON url, and looks for an item name using a keyword finder (.includes)

once it finds the array with the specified item name, it takes a value from that array called id, this id is applied to the websites url and it takes you directly to that item.

Then once it gets to that Item It loads the HTML source and parses it from string.

Inside this html data there is a list that has all the items colors listed. It then finds the specified color inside a (li).

Inside that li with the color there is another url, it takes that url and goes to it. And that is the final step.. it succesfully goes to the item that the user wanted..

It does this in a loop with each item until there are none left.

Here is the problem...

When I console and log everything It should work perfectly.

But for some odd reason It always loads the console perfectly,

(console logs all the urls for each item in its proper order)

But for some reason It just goes to the url of the last item.

Im pretty sure a solution to this would be to use async/ await. But.. Im not sure were to put it so It would go to each url in its order..

Here is the code:

function loadHTMLSource(urlSource){ 
    xhttp = new XMLHttpRequest(); 
    xhttp.open("GET", urlSource, false); 
    xhttp.send(); 
    return xhttp.response; 
}

function finder() { // do I put  async function finder here?
    var json_url = "http://www.example_shop.json";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", json_url, true);
    xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
    var resp = JSON.parse(xhr.responseText);

for (i=0; i < data.count; i++) {

    var item = data.task[atc_count][0].split(' - '); // splits the item name and color
    const searchStr = item[0]; // item name
    const lowerSearchStr = searchStr.toLowerCase(); 
    const foundItem = resp.products.find( another category
        ({ name }) => name.toLowerCase().includes(lowerSearchStr));
    console.log(searchStr);
    console.log(foundItem);

     var id = (getValues(foundItem, 'id', ''));
     //atc_count += 1;
    //loop += 1;
    //var url = []
    //url[i] = ("https://shopping_example/shop/" + id);
    var url = ("https://shopping_example/shop/" + id);


    chrome.tabs.query({currentWindow: true, active: true}, function (tab){
        chrome.tabs.update(tab.id, {url: url}); // the url of the users specified item, but default first color, parses this html to get its color url below
    })
    console.log(i);
    //i += 1;
    console.log(i);
    console.log(url);


    var page_html = loadHTMLSource(url);

    parser = new DOMParser()
    my_document = parser.parseFromString(page_html, "text/html");


    search_str = (item[1]); // the color
    search_attr_name = "style-name"; 

    var all_styles = my_document.querySelectorAll("[style-name]");

    atc_count += 1;
    loop += 1;

    matching_url = "";
    //atc_count += 1;
    //loop += 1;

    if(all_styles.length){
        all_styles.forEach(function(e){ 
        var style_name = e.attributes[search_attr_name].value; 

        if(style_name.length && style_name.toLowerCase().indexOf(search_str) > -1) { 

            if(typeof e.attributes["href"].value !== "undefined"){ 
                color = e.attributes["href"].value 
            } 
        }                           
    }); 
    console.log(color);
    var color_url = ("https://www.shopping_example.com" + color);
    chrome.tabs.query({currentWindow: true, active: true}, function (tab){
        chrome.tabs.update(tab.id, {url: color_url}); // final url the url of the item with the users specified color
    })
    console.log(color_url);
    //i += 1;
    //window.open(color_url);   
    }
}

my Main question is:

Where would I put async and await in this code to make it go to each url (temporary delay(add to cart process would go here))

and go to the next url and do the same as a loop

I found this but I cant really understand how to implement it into my script:

https://javascript.info/async-await

I would really appreciate If someone could post an example with async and await to go to each url

Thank You <3!!