Nested each loops

[MarioIonchev]

Hi, guys. Im trying to test a product with some attributes that are somehow linked if they are available. I have 4 nested loops and there maybe more in the future. What im trying to do is check if the first ones attribute is available -> click() and continue with the same logic in the other nested loops. The last one checks for an available class and if (true) should -> click() and brake the loop. Due to asynchronous nature of Cypress, im not able to do it. I tried the cy.wrap() approach, but i get the error ( Element is detached from the DOM). To avoid this im using JQuery, Cypress.$ to get the element in each loop and click(). But when i log the index of each loop i see that theyre not working as nested loops, but are executed 1 by 1. Has any encounter such problem, or am i just doing something wrong here? Every workaround and solution would be appreciated. This is my current version of Cypress -> "cypress": "^11.2.0". Here`s my current code.

selectOptions() {
let found = false;

    cy.get(newQualityArray).each(($quality, i) => {
        if (found) return false;
        Cypress.$($quality).trigger('click');

        cy.get(newWeightArray).each(($weight, i) => {
            if (found) return false;
            Cypress.$($weight).trigger('click');

            cy.get(newMetaltArray).each(($metal, i) => {
                if (found) return false;
                Cypress.$($metal).trigger('click');

                cy.get(newSizeArray).each(($size, i) => {
                    if ($size.hasClass('selectable')) {
                        if (!found) {
                            Cypress.$($size).trigger('click');
                            found = true;
                            return false;
                        }
                    }
                });
            });
        });
    });
}