Selection done in one iteration in aura, is reflecting in every other iteration

Question

I have a scenario where I am calling a custom lookup lwc component inside my aura iteration. The issue is the value I am selecting in the custom lookup in one iteration is being reflected in all the other iterations selection of lookup. How can I overcome this? I am specifically getting custom lookups based on the aura iteration index and setting the value to lightning input component below. Yet when one ischanged rest all are changing

Below is my aura iteration code

<aura:iteration items="{!v.dssList}" var="dss" indexVar="index">                   
  <tr>
    <td> 
        {!index + 1}
    </td>
    <td>
      <c:lwcCustomLookUp objectName="Service__c" indexValue="{!index}" fieldName="Name" selectRecordId="{!v.selectRecordId}" 
        selectRecordName="{!v.selectRecordName}" onselected="{!c.selectedRecords}"/> 
      <lightning:input aura:id="customlookup" name="service" type="text" label="Service" value="{!dss.Service__c}" />
    </td>
    <td>
      <lightning:input name="isdatastored" type="checkbox" label="Is Data Stored" value="{!dss.Is_Data_Stored__c}" />
    </td>
    <td>
      <lightning:input name="isdataprocessed"  type="checkbox" label="Is Data Processed"  value="{!dss.Is_Data_Processed__c}" />
    </td>
    <td>
      <lightning:input name="isdatatransmitted" type="checkbox" label="Is Data Transmitted" value="{!dss.Is_Data_Transmitted__c}" />
    </td>
    <td>
      <a onclick="{!c.removeRowDSS}" data-record="{!index}">
        <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
        <span class="slds-assistive-text">Delete</span>
      </a>
    </td> 
  </tr>
</aura:iteration>

Below is my contrller function code for onselected attribute present on cutomlookup component

selectedRecords : function(component, event, helper) {
  var selectRecName = event.getParam('selectName');
  var selectRecId = event.getParam('currentRecId');
  var indexValue=event.getParam('indexValue')
  var arr=component.find("customlookup");
  alert(arr);

  try {        
    arr.set("v.value", selectRecId);         
  } catch(err) {
    arr[indexValue].set("v.value", selectRecId);  
  }

  if(selectRecName != undefined) {
    component.set("v.selectRecordName", selectRecName);
    component.set("v.selectRecordId", selectRecId);  
  }      
}

The use case I am trying to achieve is to create multiple records with lookup fields apart from text fields based on this example https://www.forcetalks.com/blog/how-to-add-or-delete-dynamic-rows-in-salesforce-using-lightning-web-component/

Below is the screenshot of the issue I am speaking of

Answer 1

I believe your problem is that you are using a "common" variable for all items in your loop, and that when you set the value of those ones, you update them all

<c:lwcCustomLookUp 
    objectName="Service__c" 
    indexValue="{!index}" 
    fieldName="Name" 
    selectRecordId="{!v.selectRecordId}"           ** this
    selectRecordName="{!v.selectRecordName}"       ** this
    onselected="{!c.selectedRecords}"/> 

They get updated by

component.set("v.selectRecordName", selectRecName);
component.set("v.selectRecordId", selectRecId);

---

If you don't care about the values of those ones from the parent perspective (which by the code you pasted, I think you don't), try removing

        if(selectRecName != undefined) {
            component.set("v.selectRecordName", selectRecName);
            component.set("v.selectRecordId", selectRecId);
        }

The update of the variables go down to the children, but unlike aura components, lwc do not bind them to the parent (that's why you need the event). so if you don't do anything about them... they should "stay" with their own values.

---

If you do care... try to use variables (_selectRecordId, _selectedRecordName for example) inside the object you iterate (dssList) so you could use that one instead (v.dss._selectRecordName, etc.)