I am using an example of the dynamic table where you can add and remove rows from a LWC. I was able to create a dynamic header (with Start through End Date), create dynamic input fields under each element of the header and also add and remove rows. Now I need to map the dynamic input fields to the right fields to create multiple records. See below image:

In that example, it will create 4 records where the first will be Invoice April, the total amount will be 6200$ and it will also create 2 child records where the first one will be SEM | Adwords | 1200 and the second one will be FACEBOOK | Content | 5000$
The Second record will be Invoice May  for a total amount of 1200$ and with only one child record called SEM | Adwords | 1200 and so is the third and forth records.
My HTML Code:

<template for:each={contentArray} for:item="field" for:index="index">
                        <tr key={keyIndex}>
                            <td scope="col">
                                {index}
                            </td>
                            <template for:each={headerArray} for:item="field" for:index="index">
                                <td key={field.Index} scope="col">    
                                    <lightning-input data-index={index} access-key={index} id={index} type='text' value={field.Index} onchange={changeHandler}>
                                    </lightning-input>
                                </td>
                            </template>
                            <td scope="col">
                                <lightning-icon icon-name="action:delete"  access-key={index} id={index} alternative-text="Click to Call" size="small" title="large size" onclick={removeRow}>
                                </lightning-icon>
                            </td>
                        </tr>
                    </template>

my js code

changeHandler(event){
        
        this.template.querySelectorAll('lightning-input-field').forEach(element => {
            this.contentArray = this.contentArray && element.reportValidity();
        });
        
    }

    saveMultipleRecords() {
        console.log("contentArray"+JSON.stringify(this.contentArray));
        saveRecords({ recList : this.contentArray })
            .then(result => {
                this.message = result;
                this.error = undefined;                
                this.contentArray.forEach(function(item){                   
                                
                });

                if(this.message !== undefined) {
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Success',
                            message: 'Records Created!',
                            variant: 'success',
                        }),
                    );
                }
            })
            .catch(error => {
                this.message = undefined;
                this.error = error;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating records',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
                console.log("error", JSON.stringify(this.error));
            });
    }

and my cls:
 

public with sharing class invoiceSchedule {
    
    @AuraEnabled
    public static List<scheduleTable__c> saveRecords(List<scheduleTable__c> recList){
        
        Insert recList;
        
    }
}

I am new to coding and not too sure how can I get the data from my input fields but I know that I will need to clone that array and create an array of object? How can that work?

Your help is appreciated.

Thanks