Need help in Angular 4 Reusable Component

angularjs

#1

Cant get all four rows to collapse individually. Only 1 is collapsing currently.

<h2>My Employees</h2> <table cellpadding="0" cellspacing="0" class="fold-table"> <!-- <col width="130"> --> <tbody> <tr class="view"> <th scope="row"></th> <td width="10000"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" > <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne">
            <div *ngFor="let employee of emp">
            <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne"> 
                <ul>
                    <div>
                        <span>Name= {{employee.name}} <i class="fa fa-chevron-circle-down pull-right"></i></span>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        ID= {{employee.id}}
                    </div> 
                </ul> 
            </a> 
        </h4>
        </div>


    </div>
</div>


</div> </td> <!-- <td>Otto</td> -->
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>

</tr>
<tr>
  <th scope="row">3</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
    </tr>
    <tr>
  <th scope="row">4</th>
  <td>Larry</td>
  <td>the Bird</td>
  <td>@twitter</td>
</tr>


</tbody> </table>