Lightning - Which element was Changed?

Question

I have a table for create expenses. I need to identify each element that I select, in order to perform validations or actions for each one. I have tried:

var rowId = event.currentTarget.id;

It works in removebutton, but not in other rows How can access to Id of element changed (picklist, number and text)??

Thanks

COMPONENT

<aura:handler name="init" action="{!c.doInit}" value="{!this}" />
<aura:handler event="force:refreshView" action="{!c.doInit}" />

<aura:attribute name="expenses" type="Expenses__c[]"/>
<aura:attribute name="options" type="String[]" />
<aura:attribute name="selectedValue" type="String"/>

<ltng:require styles="/resource/slds_resource/assets/styles/salesforce-lightning-design-system.css?v=1" />
<div class="slds">
    <div class="slds-page-header noborderbottom" role="banner"> 
        <div class="slds-grid">
            <div class="slds-col slds-has-flexi-truncate">
                <div class="slds-media slds-no-space slds-grow">
                    <div class="slds-media__figure">
                        <lightning:icon iconName="custom:custom17" size="large" alternativeText="Indicates approval"/>
                    </div>
                    <div class="slds-media__body">
                        <p class="slds-text-title_caps slds-line-height_reset">Expenses</p>
                        <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Expenses">My expenses</h1>
                    </div>
                    <lightning:button class="slds-float_right" iconName="utility:refresh" onclick="{!c.refreshTable}" label="Refresh"/>
                    <lightning:button class="slds-float_right" iconName="utility:add" onclick="{!c.addRow}" label="Create expense"/>
                    <lightning:button class="slds-float_right" iconName="utility:clear" onclick="{!c.removeRow}" label="Delete expense"/>
                </div>
            </div>
        </div>
    </div>   
</div>

<div class="slds" style="overflow-x:auto;">
    <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked-horizontal">
        <thead>
            <tr class="slds-text-heading--label">
                <th scope="col" class="nobordertop" title="Type">
                    <div>Type</div>
                </th>
                <th scope="col" class="nobordertop" title="Import">
                    <div>Import</div>
                </th>
                <th scope="col" class="{nobordertop'}" title="Description">
                    <div>Description</div>
                </th>
                <th scope="col" class="{nobordertop'}" title="Actions">
                    <div></div>
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.expenses}" var="expenses">
                <tr>
                    <td data-label="{!expenses.PL_Expenses__c}" title="{!expenses.PL_Expenses__c}">
                        <div>
                            <ui:inputSelect aura:id="acc" required="true" value="{!expenses.PL_Expenses__c}" change="{!c.changeValue}">
                                <ui:inputSelectOption text="" label="--None--" />
                                <aura:iteration items="{!v.options}" var="ac">
                                    <ui:inputSelectOption text="{!ac}" label="{!ac}"/>
                                </aura:iteration>
                            </ui:inputSelect>
                        </div>
                    </td>
                    <td data-label="{!expenses.Import__c}" title="{!expenses.Import}">
                        <div><ui:inputNumber class="slds-input" value="{!expenses.Import__c}" change="{!c.changeValue}" aura:id="{!expenses.Id}"/></div>
                    </td>
                    <td data-label="{!expenses.Description__c}" title="{!expenses.Description}">
                        <div><ui:inputText class="slds-input" value="{!expenses.Description}" change="{!c.changeValue}" aura:id="{!expenses.Id}"/></div>
                    </td>
                    <td data-label="" title="" style="width: 50px;">
                        <form>
                            <a onclick="{!c.deleteRowDDBB}" id="{!expenses.Id}">
                                <lightning:icon variant="error" iconName="utility:delete" class="slds-icon slds-icon_small" size="small" alternativeText="icon"/>
                                <span class="slds-assistive-text">Delete expense</span>
                            </a>
                        </form>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table> 
    <lightning:button class="slds-align_absolute-center slds-button slds-button_brand slds-m-top_small" onclick="{!c.save}" label="Save"/>
</div>

Answer 1

aura:id is not the same as id. It has special rules, notably that it does not support merge syntax; the value is always treated as a literal value. Instead, it's probably easier to move the change handler to the next higher element, and set the record Id there. Here's an example:

<td data-label="{!expenses.Description__c}" 
    title="{!expenses.Description}" 
    data-id="{!expenses.Id}"
    onchange="{!c.changeValue}">
    <div><ui:inputText class="slds-input" value="{!expenses.Description}" /></div>
</td>

To actually get the value, get the list and then find the specific record:

var expense = component.get("v.expenses").find(record => record.Id === event.currentTarget.dataset.id);

Answer 2

It is possible to get a dynamic variable from your iteration using data-index attribute on any html element (would not work on aura components).

Inside your iteration:

 `<a data-index="{!item.Id}" onclick="{!c.onClickAction}" >`

on your js controller :

var clickedItemId = event.currentTarget.dataset.index