Progressbar by id

On one page I have 3 (currently 3) cards and when I update those cards I want to show a progressbar at the bottom of each card.

Each card is updated with it’s own ajax call.

When I do:

<div id="invites">
  <f7-progressbar id="invites-progressbar" color="blue" />

This is inserted at the top of the page before the header containing the main menu hamburger.

<span class="progressbar-infinite color-#invites-progressbar progressbar-in"></span>

Question 1: How do I assign an infinite progressbar to a certain div/span?
Question 2: When I do how do I specify WHICH progressbar?