Issue while saving the wrapper data through imperative way of LWC

Question

I am trying to pass the listofWrapper-> (List) data to Apex method for DML operation. I am not able to figure out how to get Outer loop index ("Oppindex") for any change in the child iteration fields while saving. Or any other Solution for saving the Wrapper Data.

My Wrapper class looks like below:-

public class OppConWrapper {
        @AuraEnabled 
        public Integer index {get;set;}
        @AuraEnabled 
        public Opp__c OppRec {get;set;}
        @AuraEnabled
        public list<Con__c> listCon {get;set;}

        public OppConWrapper(.....){.....}
}

HTML file:-

<lightning-button label="Save &amp; Close" title="Save" onclick={handleSaveClose} class="slds-m-left_x-small"></lightning-button>

    <template if:true={listOppWrapper}>
        <template for:each={listOppWrapper} for:item="OppWrap" for:index="Oppindex">
           <lightning-record-edit-form record-id={OppWrap.oppRec.id} object-api-name="Opp__c">
            <lightning-input-field class='inputOpp'...... ></lightning-input-field>
            </<lightning-record-edit>
            <template for:each={OppWrap.listCon} for:item="con" for:index="conIndex">
              <lightning-record-edit-form record-id={con.id} object-api-name="Con__c">
              <lightning-input-field class='inputCon'...... ></lightning-input-field>
              </<lightning-record-edit>
            </template>
        </template>
    </template>

JS File:-

handleSaveClose(event){
  let inputConFields = this.template.querySelectorAll('.inputCon');
  let inputOppFields = this.template.querySelectorAll('.inputOpp');
}

Answer 1

Change your HTML design to the parent-child relationship

parent component

 <template if:true={listOppWrapper}>
    <template for:each={listOppWrapper} for:item="OppWrap" for:index="Oppindex">
       <lightning-record-edit-form record-id={OppWrap.oppRec.id} object-api-name="Opp__c">
        <lightning-input-field class='inputOpp'...... ></lightning-input-field>
        </lightning-record-edit>
           <template for:each={OppWrap.listCon} for:item="con" for:index="conIndex">
              <c-child record-id={con.id} api-name="Con__c"></c-dhild>
         </template>
    </template>
</template>

in JS

handleSaveClose(event){
  let inputConFields = this.template.querySelectorAll('c-child');
  Array.from(inputConFields).forEach(item=>{
    console.log(item.fetchInputData())
  })
  let inputOppFields = this.template.querySelectorAll('.inputOpp');
}

child component

@api recordId
@api apiName
@api fetchInputData(){
  return this.template.querySelectorAll('.inputCon').value;
}

In child html

<template>
<lightning-record-edit-form record-id={recordId} object-api-name={apiName}>
      <lightning-input-field class={inputCon}...... ></lightning-input-field>
 </lightning-record-edit>
</template>