How to implement mdb-accordion within mdb-table

*_Expected behavior_* So I am attempting to implement mdb accordions example with mdb table and I'm having some difficulties in getting it to collapse correctly. I declare the table, then the table head, then the entirety of the accordion is bound within the body of the iterated(ngFor) rows of the table, the contents of the table(body) make up the heads of the accordion, and the body the of accordion will be a description that's pulled from another component based on the index(placeholder).

*_Actual behavior_* After correcting tag errors, I get something where only the top row of the table expands and all arrows flip of the table flip when a single row is expanded. I am wondering just by following and explaining in tags(ignore spans contents and calls) only in html what should be the order I weave/nest accordion items, head, and body into mdb table, head and body.

Resources (screenshots, code snippets etc.)

      <th *ngFor="let job of jobElements; let i = index" aria-controls="tableSortExample" scope="col" [mdbTableSort]="personList" [sortBy]="jobElements[i]">{{job | titlecase}}

        <mdb-icon fas icon="sort"></mdb-icon>
      </th>
    </tr>
  </thead>
    <mdb-accordion [multiple]="true">
    <tbody>
      <mdb-accordion-item>  
      <tr *ngFor="let el of personList | filter : 'name' : searchString; let i = index">

        <mdb-accordion-item-head>
        <th scope="row">
          <a class="text-success" (click)="rankup(el.id)">
            <mdb-icon fas icon="fas fa-arrow-up"></mdb-icon>
          </a>
          <a class="text-success" (click)="rankdown(el.id)">
            <mdb-icon fas icon="fas fa-arrow-down"></mdb-icon>
          </a>

          <input type="number" value={{el.id}} (keyup)="changeNumber(el.id, 'id', $event)">
        </th>

        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'name', $event)" >{{el.title}}</span>

        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'date', $event)" >{{el.date}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'location', $event)" >{{el.location}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'status', $event)" >{{el.status}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'opens', $event)" >{{el.opens}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'duration', $event)" >{{el.duration}}</span>
        </td>


      </mdb-accordion-item-head>
      <mdb-accordion-item-body>
          All work and no play makes Jack a dull boy. 
      </mdb-accordion-item-body>
      </tr>

      </mdb-accordion-item>
    </tbody>
  </mdb-accordion>
  </table>

`