How to resolve Stale element while looping through all the buttons?

As a part of a larger test, I have to click a particular button with no assigned ID. After browsing and trying various other solutions on stackoverflow, I thought to simply loop through all the buttons - and later think about how to select it individually and click it. Here's the code:

    List<WebElement> buttons = driver.findElements(By.cssSelector(".btn.btn-primary"));
    for (WebElement b:buttons) {
        System.out.println(b.getTagName());
        System.out.println(b.getText());
    }

The button is dynamically generated using Jquery. The actual webpage is only a collection of .js references. Here's the code I got from Inspect Element:

<div class="modal-footer">
    <button class="btn btn-primary" type="button" data-bb-handler="yes">Task Status</button>
    <button class="btn btn-primary" type="button" data-bb-handler="danger">Close</button>
</div>

There are over 20 buttons (hardly 4-5 visible at this stage) in the process on this web page. Currently, there's a popup (background is faded) with two buttons as shown in the code section above.

In selenium, it is throwing StaleElementReferenceException: stale element reference: element is not attached to the page document on the line that says b.getTagName().

Unsure about what might be causing this. Already tried: 1. Implicitly waiting for 30 seconds. 2. XPath selectors 3. Polling multiple times in a loop and try-catch blocks ... as mentioned in other answers. Getting same exception for all the possible solutions.

What might be causing this?

p.s. Can't share screenshot as this is a propriety enterprise application.