Add a number to each element with the same class

Question

In order to count all elements with the same class I can write the following:

 var count = document.querySelectorAll('#teamMember .r-team-member').length;
 console.log(count);

How can I add a number to each of those elements as a class? For example, the HTML is:

<div id="teamMember" class="size-33">
    <div class="r-team-member">
        <div style="display:none;" id="bio"></div>
        <div id="readBio">Read Bio</div>
    </div>
</div>

I have also written the following javascript:

function showBio() {
    document.getElementById('bio').style.display = "block";
    document.getElementById('readBio').style.display = "none";
}

Which is working, but if I click on the 'Read Bio' div, then it opens all of the Bios.

What javascript can I write than make it something along the lines of:

<div id="teamMember" class="size-33">
    <div class="r-team-member 1">
        <div id="bio"></div>
        <div id="readBio"></div>
    </div>
</div>

<div id="teamMember" class="size-33">
    <div class="r-team-member 2">
        <div id="bio"></div>
        <div id="readBio"></div>
    </div>
</div>

etc?