Hi All, 

I'm iterating over a list of components, and add or remove instances of that component from the iterated list.

The list on the parent object is 2-way bound to a matching list on the child component.

My problem is, every time I "add' an instance using the button, it refreshes all fields from the prior instance that already had information in them. 
Deleting an item, similarly, removes all data in the other iterations.
The actions performed by these controllers are based on the instructions from a Udemy series, and repurposed for custom objects 
"EAM_Form__c" and "Customer_Product__c", who are parent and child, respectively.

Below is a very simplified version of the code. 
How do I prevent the fields from blanking out every time I change the list? 

My Parent Component: 

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="customerProductList" type="List" default="[]" />
    
    <aura:iteration items="{!v.customerProductList}" var="myProduct" indexVar="index">
        <c:DemoIterationChild customerProductListChild="{!v.customerProductList}" indexNo="{!index}"/>
    </aura:iteration>
    
    <div class="buttonSection">
	    <lightning:button iconName="utility:add" variant="border-filled" label="Add Customer Product" onclick="{!c.addCustomerProduct}"/>
    </div>
</aura:component>

({
    addCustomerProduct : function(cmp,evt,hlp){
        
        var currentList = cmp.get("v.customerProductList");
        var currentSize = parseInt((currentList.length));
        var newSize 	= parseInt((currentSize.length) + 1);
        console.log("newSize = "+newSize);
        currentList.push(newSize);
        cmp.set("v.customerProductList",currentList);
        
    },
})

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="thisProduct" type="Customer_Product__c" default="{'sobjectType':'Customer_Product__c'}" />
    <aura:attribute name="customerProductListChild" type="List" default="[]"/>
    <aura:attribute name="indexNo" type="Integer"/>
    
    <lightning:input name="productL" value="{!v.thisProduct.Length__c}" label="Product Length (l)" ></lightning:input>
    <lightning:input name="productW" value="{!v.thisProduct.Width__c}" label="Product Width (w)" ></lightning:input>
    <lightning:input name="productH" value="{!v.thisProduct.Height__c}" label="Product Height (h)" ></lightning:input>
    <lightning:input name="productWt" value="{!v.thisProduct.Weight__c}" label="Product Weight" ></lightning:input>
    
    <div style="float:right; margin-right:25px;">
        <lightning:button iconName="utility:delete" variant="border-filled" label="Delete This Product" onclick="{!c.deleteProduct}" />
    </div>
    
</aura:component>

({
	deleteProduct : function(cmp, evt, hlp) {
		var newList = cmp.get("v.customerProductListChild");
        	var currentIndex = cmp.get("v.indexNo");
        	if(currentIndex > -1)
        	newList.splice(currentIndex,1);
        	cmp.set("v.customerProductListChild", newList);    
	},
})