LWC Form Not Adding All Records

Question

I've created a lightning web component to record items that we may receive to add to inventory. The lwc sits on a record page on the "Receive" object and is meant to add related item records to the parent receive object. My current code sporadically adds records but is not capturing all of the items the user adds on the LWC. For example,here I'm ready to add three "received inentory items" of differing quanities via my lwc:

Once I click submit only one of the items is added to the related list (seen here on the bottom right).

I've been unable to determine why the other items aren't being added.

My lwc html is as follows:

<template>
<lightning-card>
    <h3 slot="title">
        <lightning-icon icon-name="action:new" alternative-text="Event" size="small"></lightning-icon>
        &nbsp; Add Received Inventory Items
    </h3>

    <div class = "slds-p-around_medium" >
        <template for:each={itemList} for:item="item" for:index="index">
            <lightning-record-edit-form key={item.id} object-api-name="inventory__c">
                <lightning-messages> </lightning-messages>
                    <div class="slds-grid">
                        <div class="slds-size_4-of-12">
                            <div> 
                                <lightning-input-field field-name="Item_Type__c" variant="label-stacked" required>
                                </lightning-input-field>
                            </div>
                        </div>
                        <div class="slds-size_2-of-12">
                            <div>
                                <lightning-input-field field-name="Received__c" variant="label-stacked" required>
                                </lightning-input-field>
                            </div>
                        </div>
                            <div >
                                <lightning-input-field field-name="donation__c" value={recordId} variant="label-stacked" required>
                                </lightning-input-field>
                            </div>
                        <div class="slds-size_2-of-12">
                            <div>
                                <div class= "slds-m-top_large">
                                    <lightning-icon icon-name="utility:add" access-key={item.id} id={index}
                                        alternative-text="Add Row" size="small" title="Add Row" onclick={addRow}>
                                    </lightning-icon>
                                    &nbsp; &nbsp;
                                    <lightning-icon icon-name="utility:delete" access-key={item.id} id={index}
                                        alternative-text="Delete Row" size="small" title="Delete Row" onclick={removeRow}>
                                    </lightning-icon>
                                </div>
                            </div>
                        </div>
                    </div>
           </lightning-record-edit-form>
        </template>
        <lightning-layout>
            <div class="slds-align_absolute-center slds-p-top_small" >
                <lightning-button class = "slds-p-around_xxx-small" variant="success" onclick={handleSubmit} name="submit" label="Submit">
                </lightning-button>
                <lightning-button class = "slds-p-around_xxx-small" variant="neutral" onclick={handleReset} name="cancel" label="Cancel">
                </lightning-button>
            </div>
        </lightning-layout>
    </div>
</lightning-card>
</template>

And my javascript is here:

    import { LightningElement, track, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class AddInventoryItems extends NavigationMixin(LightningElement) {

keyIndex = 0;
count;
@api recordId;
@track itemList = [
    {
        id: 0
    }
];

addRow() {
    ++this.keyIndex;
    var newItem = [{ id: this.keyIndex }];
    this.itemList = this.itemList.concat(newItem);
}

removeRow(event) {
    if (this.itemList.length >= 2) {
        this.itemList = this.itemList.filter(function (element) {
            return parseInt(element.id) !== parseInt(event.target.accessKey);
        });
    }
}

resetForm() {
    this.itemList = [];
    this.addRow();
}

handleReset(){
    this.resetForm();
}

handleSubmit() {
    var isVal = true;
    this.count = 0;
    this.template.querySelectorAll('lightning-input-field').forEach(element => {
        isVal = isVal && element.reportValidity();
    });
    if (isVal) {
        this.template.querySelectorAll('lightning-record-edit-form').forEach(element => {
            //console.log(JSON.stringify(element));
            element.submit();
            this.count++;
            //window.alert('Submitting item ' + this.count + ' of ' + this.itemList.length);
            if(this.count === this.itemList.length)
            {
               // window.alert ('About to reset form');
                this.count = 0;
                this.resetForm();
                eval("$A.get('e.force:refreshView').fire();");
            }
        });
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Items successfully created',
                variant: 'success',
            }),
        );
        
    } else {
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error creating records',
                message: 'Please enter all the required fields',
                variant: 'error',
            }),
        );
    }
    }
}

Answer 1

I figured out that this wasn't a problem with my code. Instead, a few of the parent records from the master-detail relationship were missing required fields and therefore throwing an error and not adding the child records. Thank you for the suggestions.