Click only working for last button in ngFor

[twilkes]

Hello,
I’m trying to build a panel that will allow a user to edit their contact phone numbers. There needs to be a list of phone numbers, with the ability to add, delete, and edit a number. Below is a screen shot of the component:

I have almost everything working, however only the last delete button (the red circle-x) works; it is the only one where when I press it, the modal will pop up. I was wondering if I could get any help.
Thanks!
Below is the section in the .html and .ts file that handles this component.

<ion-item class="borderRadius item item-input" margin-top>      
      <ion-label stacked>Phone</ion-label>
      <table item-content>                    
        <tr *ngFor='let p of phone'>
          <td>
            <ion-input type="tel" [(ngModel)]='p.national_format' readonly={{!edit.phone}}></ion-input>
          </td>

          <td>
            <button id="p.phoneId" ion-button clear icon-only (click)="deletePhone(p.phoneId)">
              <ion-icon name="close-circle" style="font-size: 20; color: red"></ion-icon>      
            </button>
          </td>
        </tr>
      </table>

      <table item-end>
        <tr><td>
        <button ion-button outline item-end
          *ngIf="!edit.phone && phone && phone.length" (click)="toggleEdit('phone')"
        >                
          <ion-icon name="create" item-right class='edit'></ion-icon>
          Edit
        </button>
        </td></tr>
        <tr><td>
        <button ion-button outline item-end (click)="addPhone()"       
        >                
          <ion-icon name="add" item-right class='edit'></ion-icon>
          Add Phone
        </button>
        </td></tr>
      </table>
    </ion-item>

// a portion of my .ts file

deletePhone(phoneId) {    
    let prompt = this.alert.create({
      title: 'Are you sure?',
      message: 'This will remove this phone number from your account.',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {          
          }
        },
        {
          text: 'Delete',
          handler: () => {
            console.log('Delete phone', phoneId);
          }
        }]
    });
    prompt.present();
  }