How do i add a rising value as a transition delay for a lot children while using a observer?

Question

I have a Parent div with around 30 children which are dynamically created with JavaScript. I am using the following observer to make on Scroll animations:

const observer = new IntersectionObserver((entries) =>{
entries.forEach((entry) => {
    console.log(entry)
    if (entry.isIntersecting) {
        entry.target.classList.add("show");
    } else{
    entry.target.classList.remove("show");
    }
});
});

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach( (el) => observer.observe(el));

I also use

    flex-wrap: wrap ;

on the parent. So there is a row of 4 divs per row on my site. So if I scroll and the transition starts and the children start to appear all 4 divs appear at the same time but i want them to appear after each other. Here is the code how i create the children:

function AddMember() {

    function CreateOwner() {
        var hero = document.getElementById('hero');

        var OwnerContainer = document.createElement("div"); 
        OwnerContainer.id = '0';    
        OwnerContainer.classList.add('OwnerContainer');    
        OwnerContainer.setAttribute("onclick", "ToggleMoreInfo(this.id)");  
        OwnerContainer.classList.add('hidden'); 
        hero.append(OwnerContainer);   

        var MemberImg = document.createElement("img");
        MemberImg.setAttribute("src", Members[OwnerContainer.id][5]);
        OwnerContainer.appendChild(MemberImg);

        var OwnerText = document.createElement("div");
        OwnerText.id = 'OwnerText';
        OwnerContainer.appendChild(OwnerText);

        var CreateP = document.createElement('p');
        CreateP.className = 'InfoHeadLine';
        CreateP.innerHTML = Members[OwnerContainer.id][3];
        OwnerText.appendChild(CreateP);

        var CreateP2 = document.createElement('p');
        CreateP2.className = 'Infodescription';
        CreateP2.innerHTML = Members[OwnerContainer.id][4];
        OwnerText.appendChild(CreateP2);
    };

    var MemberContainer = document.getElementById("MemberContainer");
    
    for (var i = 1; i < Members.length ; i++) {
        var Member = document.createElement('div');
        Member.className = 'Member';
        Member.classList.add('hidden');
        Member.setAttribute('onclick', 'ToggleMoreInfo(this.id)');
        Member.setAttribute('onmouseout', 'Leaving(this.id)');
        Member.id = i ;
        var DelayDuration = String(i).padEnd(3, 0)
        Member.setAttribute('trasition-delay', DelayDuration + 'ms');
        MemberContainer.appendChild(Member);

        var MemberImg = document.createElement('img');
        MemberImg.className = 'MemberImg';
        MemberImg.src = Members[i][5];
        Member.appendChild(MemberImg);
        
        var MemberDiscription = document.createElement('div');
        MemberDiscription.className = 'MemberDiscription';
        Member.appendChild(MemberDiscription);

        var MemberName = document.createElement('div');
        MemberName.className = 'MemberName';
        MemberName.innerHTML = Members[i][0];
        MemberDiscription.appendChild(MemberName);

        var ClubStatus = document.createElement('p');
        ClubStatus.className = 'ClubStatus';
        ClubStatus.innerHTML = Members[i][2];
        MemberDiscription.appendChild(ClubStatus);

        var ExpandIcon = document.createElement('i');
        ExpandIcon.className = 'material-icons';
        ExpandIcon.setAttribute('style','font-size: 60px; color:#8CB3C8; text-shadow:2px 2px 4px #000000;');
        ExpandIcon.innerHTML = 'add';
        ExpandIcon.id = i ;
        MemberDiscription.appendChild(ExpandIcon);
    };

    CreateOwner()
};

Here is an Example for my structure for the children ( Please dont mid the language in the Arrays im from Germany and you dont need to understand what they are saying only the structure matters):

const Members = [
    Member1 = [
        "Matze" ,
        Tags = [ 
            "Eigentümer" ,
            "Warhammer 40K Spieler" ,
            "Magic Spieler" ,
            "Baltic Cup Gewinner 2023" ,
            "Tournier Spieler" ,
        ] ,
        "https://instagram.com/grrt_ptrs?igshid=MmU2YjMzNjRlOQ==" ,
        'Moin, ich bin <span class="InfoBoldText"> Matze </span> der <span class="InfoBoldText"> Eigentümer </span> der Weekend Warriers ' ,
        "Ich bin Matze und ** Jahre alt. Seit ** Jahren leite ich die Weekend Warriors und stelle auch die Räumlichkeiten für unseren Club. Zusätzlich bin ich ein riesiger Fan von Warhammer 40K und Magic." ,
        "Style/Images/MissingimgIMG.png" ,
        ' "MatzeBorzi" ' 
    ] ,
    Member2 = [
        "Björn" ,
        Tags = [
            "Warhammer 40K Spieler" ,
            "Magic Spieler" ,
            "Tournier Spieler" ,
        ],
        "Mitglied" ,
        "https://instagram.com/epidemic40k?igshid=MmU2YjMzNjRlOQ== " ,
        "Test description" ,
        "Style/Images/Screenshot_2023-08-08-01-48-35-18_1c337646f29875672b5a61192b9010f9.jpg" ,
        ' "Epidemic" '
    ],
    Member3 = [
        "Gerrit" ,
        Tags = [
            "Warhammer 40K Spieler" ,
            "Magic Spieler" ,
            "Tournier Spieler" ,
        ],
        "Mitglied" ,
        "https://instagram.com/grrt_ptrs?igshid=MmU2YjMzNjRlOQ==" ,
        "Test description" ,
        "Style/Images/Gerrit-Peters.jpg" , 
        ' "BigBoy" '
    ],
];

Because I want to keep it dynamically to easily add members by just adding an Array i **dont **want to use:

.Member:nth-child(1){
    transition-delay: 200ms;
}
.Member:nth-child(2){
    transition-delay: 400ms;
}
.Member:nth-child(3){
    transition-delay: 600ms;
}

Here are my classes i use to make the slide in:

.hidden {
    opacity: 0;
    transform: translate(-100%);
    filter: blur(10px);
    transition: all 600ms;
}

.show {
    opacity: 1;
    transform: translate(0);
    filter: none;
}

I also tried to loop through my Array of all Children and add an Transition delay by their id because their ids are based on 1,2,3,4,5... you get it. But still the row of 4 children appeared at the same time and do not appear after each other. You know like the slide in one by one.