Angular 2 : Modal Toggle - forms

Question

Why is it that when I click the edit button of a row, the modal unpredictably opens? Like -- few rows can be opened then the rest won't. Or when I try clicking those unopened rows, they can already be opened surprisingly. COMPLETELY UNPREDICTABLE.
Here are my codes:
Section List:
showDialogBox : boolean = false;
onToggleDialogBox(id) {
this.showDialogBox = !this.showDialogBox;
console.log(id);
}
<table class="ui very basic table">
<thead>
<tr>
<th width="35%">Name</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let section of dataSource['docs']">
<td><h4>{{section.name}}</h4></td>
<td>{{section.remark}}</td>
<td class="collapsing">
<div class="ui small basic icon buttons">
<button class="ui button"><i class="write icon" (click)="onToggleDialogBox(section._id)"></i></button>
<button class="ui button"><i class="trash icon"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<app-dialog-form *ngIf="showDialogBox" [(showDialogBox)]="showDialogBox" #form>
{{formTitle}}
<div class="action" action>
<button class="ui button basic" (click)="onToggleDialogBox()">Cancel</button>
<button class="ui button primary medium" (click)="addSection(form.formValues)">Save</button>
</div>
</app-dialog-form>
Dialog Form:
(I don't think there's no need for the HTML because I just want to know why the showing of modal is unpredictable upon clicking the edit icon/button above)
#Input() showDialogBox : boolean = true;
#Output() showDialogBoxChange = new EventEmitter<boolean>();