Problem with form - Multiple line items having same name

So I have a form multiple line items having same column/field. Below is my html code:

<ion-item>
<ion-label position="floating">Customer Name</ion-label>
<ion-input type="text" name="CustomerName" ngModel>
</ion-input>
</ion-item>

<ion-item *ngFor="let att of anArray; let idx = index">
<ion-item>
        <ion-label position="floating">Line Date : </ion-label>
        <ion-input type="text" name="LineDate{{idx+1}}" ngModel></ion-input>
    </ion-item>
    <ion-item>
        <ion-label position="floating">Line Item</ion-label>
        <ion-input type="text" name="LineItem{{idx+1}}" ngModel></ion-input>
    </ion-item>input type="text" name="Type{{idx+1}}" ngModel></ion-input>
    </ion-item>
    <ion-item>
        <ion-label position="floating">Description</ion-label>
        <ion-input type="text" name="Description{{idx+1}}" ngModel></ion-input>
    </ion-item>
</ion-item>

After submitting the form, I am getting below JSON generated:

{
  "CustomerName": "",
  "LineDate1": "A",
  "LineItem1": "A",
  "Type1": "A",
  "Description1": "A",
  "LineDate2": "B",
  "LineItem2": "B",
  "Type2": "B",
  "Description2": "B"
}

But this is not what I actually was expecting. I need something like below. So that I can easily convert below JSON to rows and insert into a database table.

{
  "CustomerName": "abc",
  "LineDate": "A",
  "LineItem": "A",
  "Type": "A",
  "Description": "A"
},
{
  "CustomerName": "abc",
  "LineDate": "B",
  "LineItem": "B",
  "Type": "B",
  "Description": "B"
}