group of collapses just open the first one

i have an array of objects inside an array that show the informations on a table with a ngFor. I put these informations inside a collapse to only show the table when i click and open that especific collapse. My problem is when i click on the others buttons of collapse, it just opens the first one again and again. How can i fix that?

html:

<ng-container *ngFor="let card of infoArr ; let i = index">
    <button data-toggle="collapse" data-target="#demo">
        <h3 class="box-title"> open </h3>
    </button>
    <div id="demo" class="collapse">
        <div class="row">
          <div class="col-md-12">
             <div class="table-responsive">
                <table class="table table-striped table-bordered full-data-table">
                   <thead>
                      <tr>
                         <th>Name</th>
                         <th>Age</th>
                         <th>Year</th>
                         <th>Subject</th>
                      </tr>
                   </thead>
                   <tbody>
                      <tr *ngFor="let item of card">
                         <td>{{item.name}}</td>
                         <td>{{item.age}}</td>
                         <td>{{item.year}}</td>
                         <td>{{item.subject}}</td>
                      </tr>
                   </tbody>
                </table>
              </div>
            </div>
          </div>
       </div>
</ng-container>

typescript:

export class AppComponent {
  name = 'Angular';
  infosArr = [
  [
   { name: "ana", age: 18, year: 2005, subject: 'math' },
   { name: "sofia", age: 15, year: 2008, subject: 'english'  },
   { name: "carlos", age: 17, year: 2006, subject: 'history'  },
   { name: "abgail", age: 12, year: 2011, subject: 'art'  }
  ],
  [
   { name: "susan", age: 18, year: 2005, subject: 'math' },
   { name: "lucas", age: 15, year: 2008, subject: 'english'  },
   { name: "jack", age: 17, year: 2006, subject: 'history'  },
   { name: "joseph", age: 12, year: 2011, subject: 'art'  }
  ],
  [
   { name: "mirla", age: 18, year: 2005, subject: 'math' },
   { name: "harry", age: 15, year: 2008, subject: 'english'  },
   { name: "paula", age: 17, year: 2006, subject: 'history'  },
   { name: "sandy", age: 12, year: 2011, subject: 'art'  }
  ]
 ]
}

the informations are showing and it’s everything ok with the table, but i can’t iterate in a proper way to make each collapse open