Clicking a bunch of buttons that need to wait on Ajax calls before proceeding with Greasemonkey

Question

I have an HTML structure that essentially looks like an example I provide below. I am trying to iterate over each li using jquery's .each() which is working fine. I then want to try and click each "buy" button which is also working.

Here is where the struggles begin. When the buy is clicked an AJAX call is made to check if the item is still available, and then the confirmation div is shown (confirmation div is seen in code below). I would then like to click the "Yes" to confirm the transaction (already have the trigger working here). Before proceeding to the next li however I need to again wait for this ajax call to finish.

Is there a way to go about this properly?

Basic HTML setup on the website:

<ul>
    <li>
        <div class="item-name">Some item</div>
        <span class="buy-item">Buy</span>
        <div class="confirm-buy"></div>  //EMPTY UNTIL AJAX DONE, when Done this div is filled
        <div class="success-buy"></div>  //EMPTY UNTIL AJAX DONE for buy confirmation, when Done this div is filled
    </li>
    <li>
        <div class="item-name">Some item</div>
        <span class="buy-item">Buy</span>
        <div class="confirm-buy"></div>  //EMPTY UNTIL AJAX DONE, when Done this div is filled
        <div class="success-buy"></div>  //EMPTY UNTIL AJAX DONE for buy confirmation, when Done this div is filled
    </li>
    <li>
        <div class="item-name">Some item</div>
        <span class="buy-item">Buy</span>
        <div class="confirm-buy"></div>  //EMPTY UNTIL AJAX DONE, when Done this div is filled
        <div class="success-buy"></div>  //EMPTY UNTIL AJAX DONE for buy confirmation, when Done this div is filled
    </li>
</ul>

Javascript (example, may not exactly match the HTML sample above)

$(document).on("click", "button.buyAllOfIt", function() {
    //Iterate over each list item
    $("li").each(function() { 
        //Click the initial "buy" button:
        $(this).find('span.buy-item').trigger('click');

        //Click the confirmation "Yes" that pops up after the ajax finishes from above click:
        $(this).find('a.yes-buy').trigger('click');

        //Now it should wait until the above ajax finishes before it continues to
        // "trigger" the next "Buy" click in the next list item!
    });
});

Essentially I just want to iterate over each of the li elements, and then wait at two different points before continuing. When .confirm-buy has text added into it in the current li then it should continue (it will click a buy confirmation), then it should wait again, but this time for .success-buy to be filled. Then it should continue to the next li.

I am stumped on how to handle all of this waiting, especially while inside a .each().

Edit: Here is an example of the steps in picture form:

Answer 1

You could render the li from javascript dynamically. You need to have a method which calls the API which provides you whether the item is available or not. Inside the callback function of the API call add your render method. This method runs a for loop which adds li and then renders into the UI.

The best practice is to have a one single alert boxes for Confirm box and Success box.

Use an ID for each li and call the confirm and success method with the respective ids to a method that renders confirm and later success into the UI.