How to iterate through an array of input fields with the same name and insert the value in an array?

Question

I have a template that iterates through an array called amountArray and creates input fields for the amounts. The input fields have the same name called fieldAmount. When I enter value, I know which input I am in with the help of the index. The problem I have is the first field works but when I get to the second field it will not push it in the array under Amount2

See results: [{"Name":"fff","Description":"ttt","Amount":"777","**Amount2":"",**"Schedule":"a0h8A000005UjVPQA0"}]

Here is the template:

<template for:each={contentArray} for:item="field" for:index="index">
    <tr key={keyIndex}>
        <td scope="col">
            {index}
        </td>
        <td scope="col">
            <lightning-input value={field.Name} data-index={index} access-type='text' name="fieldName" onchange={changeHandler}>
            </lightning-input>
                {index}
        </td>
        <td scope="col">
            <lightning-input value={field.Description__c} data-index={index} access-key={index} type='text' name="fieldDescription" onchange={changeHandler}>
            </lightning-input>
                {index}
        </td>
                                
        <template for:each={amountArray} for:item="field2" for:index="index2">
            <td key={field2.index2} scope="col">    
                <lightning-input  key={index2} data-index={index2} access-key={index2} type='text' name="fieldAmount" onchange={changeHandler}>
                </lightning-input>
                {index} - {index2}
            </td>
        </template>
        <td scope="col">
            <lightning-icon icon-name="action:delete"  access-key={index} size="small" title="large size" onclick={removeRow}>
            </lightning-icon>
        </td>
    </tr>
</template>

Here is my changeHandler:

changeHandler(event){
    
    if (event.target.name==='fieldName') {
        this.contentArray[event.target.accessKey].Schedule = 'a0h8A000005UjVPQA0';
        this.contentArray[event.target.accessKey].Name = event.target.value;
    } else if (event.target.name==='fieldDescription') {
        this.contentArray[event.target.accessKey].Description = event.target.value;
    } else if (event.target.dataset.index ==='0') {
       console.log('Index 0');
       // I see index 0 when I enter a value in that specific field
       this.contentArray[event.target.accessKey].Amount = event.target.value;
                
    } else if (event.target.dataset.index ==='1') {
        // I see index 1 when I enter a value in that specific field
        console.log('Index 1'); 
        this.contentArray[event.target.accessKey].Amount2 = event.target.value;
    }
    console.log(JSON.stringify(this.contentArray));
}

Not too sure if the issue is due to accessKey being the same key and it doesn't allow to do so? How can I make this work? Thanks! Eric

Answer 1

event.target refers to the HTML element the event was fired from. When the event is fired from an element where access-key is set to index, it will be the index of the contentArray. Conversely, when the event is fired from an element where access-key is set to index2, it will be the index of the amountArray (in the inner for:each).

Presumably, you want to update same element/object in whatever iteration of contentArray that you are updating in the other fields. So you want to set the access-key value to index instead of index2.