dont wait until function finishes to run another function

Question

Hello I am creating this script where I create a post request that adds an item to cart and selects the size all in the backend.

As it runs it opens up a loading html and I wanted to have the current item that is being added's info added into a table in the html page.

Im not sure if this is the most efficent and fast method (please let me know if there is a better way) but what I did was I create a listener on the html/js page and send a message from the background.js page that is doing the work to that js page that is listening for the message.

What it does is that It finds the item so it sends a message of the item name, then it finds the items proper color and sends a message of the color selected, then it finds the size and selects the proper size. here is the code:

chrome.runtime.sendMessage({ carting: true, status: {
    status_item: (item[0]) //item name
} });

//carting code(irrelevant to this issue)

chrome.runtime.sendMessage({ carting: true, status: {
    status_color: (item[1]) //item color
} });

//more irrelevent carting code

chrome.runtime.sendMessage({ carting: true, status: {
    status_size: (size_text.text) // size
} });

this is what I had in the listener page:

chrome.runtime.onMessage.addListener(function(message, sender) {
    if (!message.carting) return;

    var Status = message.status;

    $(function() {

        $("#tasks_table").append('<tr>'
            +'<td>'+item+'</td>'
            +'<td>'+color+'</td>'
            +'<td>'+size+'</td>'
            +'</tr>'); 



    }
})

The problem with it was is that during the carting process when it yet hasn't found the color it would just constantly add undefined into the table so I found a solution to that issue by using functions:

function waitForItem(item) {
    if (typeof item !== "undefined") {
         $("#tasks_table").append('<tr>'+'<td>'+item+'</td>');
        } else {
            setTimeout(waitForItem, 10);
        }
    }

function waitForColor(color) {
    if (typeof color !== "undefined") {
        $("#tasks_table").append('<td>'+color+'</td>');
        } else {
            setTimeout(waitForColor, 10);
        }
}

function waitForSize(size) {
    if (typeof size !== "undefined") {
        $("#tasks_table").append('<td>'+size+'</td>'+'</tr>');
        } else {
            setTimeout(waitForSize, 10);
        }
}
waitForItem(item);
waitForColor(color);
waitForSize(size);

Now this did work it stopped adding the undefined into the table but now the problem is that it runs the first item function until it is completly done and then so on with each function.

When I have two items it adds the item name for the first item into the table then waits until the second item name is found and adds it too then proceeds to add all the color and the sizes. The problem with this is that my background page works in a loop. It finds the first item, then its color, then its size, then it goes onto the next item, its color, and its size.

So when It finds the first item and then the second item it adds all the rest of the color and size right at the same time. Which I don't want.

I want it to add the info into the table the same way the background page runs so the user can see how smoothly and fast it runs.