Hi All ,

I am developing a lightning component and its has nested Aura Iteration component.Code is wrriten here-
1-Component Code : 

<aura:component >
    <aura:attribute name="objInt" type="IntController.IntNodeWrapper" />
    <aura:attribute name="ext" type="String" default="plus"/>
 <aura:attribute name="extChild" type="String" default="plus"/>
    <li  id="tree0-node0" class="slds-tree__branch slds-is-open" role="treeitem" aria-level="1" aria-expanded="true">
        <div class="slds-tree__item">
            <!--<ui:inputCheckbox  value="{!v.objInt.isSelected}"/>-->
            <aura:if isTrue="{!v.objInt.hasChildren == true}">
                <aura:if isTrue="{!v.ext=='plus'}">
                    <div id="plus" >
                        <img onclick="{!c.showHidePanel}" draggable="false" class="emoji" alt="➕" src="/resource/Icons/Icons/round_plus.png" style="width:20px;height:20px;"/>
               
                    </div>
                    <aura:set attribute="else">
                        <div id="minus"><img onclick="{!c.showHidePanel}" draggable="false" class="emoji" alt="➖" src="/resource/Icons/Icons/round_minus.png" style="width:20px;height:20px;"/></div>
                    </aura:set>
                </aura:if> 
                &nbsp;
                <aura:set attribute="else">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </aura:set>
            </aura:if> 
            <a id="tree0-node0-0-link"  tabindex="-1" onclick="{!c.showHidePanel}" role="presentation">{!v.objInt.myIntName}</a>
        </div>
         
        <ul aura:id="{!v.objInt.myIntId}" id="{!v.objInt.myIntId}" style="display:none;" class="slds-tree__group slds-nested" role="group" aria-labelledby="tree0-node0-link">
            <aura:iteration items="{!v.objInt.myChildNodes}" var="ChildInt">
                <aura:if isTrue="{!ChildInt.hasChildren == true}">
    <li id="tree0-node0-1" class="slds-tree__item" role="treeitem" aria-level="2" style="margin-left: 50px;">
                    <div class="slds-tree__item">
      <aura:if isTrue="{!ChildInt.hasChildren == true}">
       <aura:if isTrue="{!v.extChild=='plus'}">
        <div id="plus" >
         <img  onclick="{!c.ChildshowHidePanel}" draggable="false" class="emoji" alt="➕" src="/resource/Icons/Icons/round_plus.png" style="width:20px;height:20px;" name="{!ChildInt.myIntId}"/>
         
        </div>
        <aura:set attribute="else">
         <div id="minus"><img onclick="{!c.ChildshowHidePanel}" draggable="false" class="emoji" alt="➖" src="/resource/Icons/Icons/round_minus.png" style="width:20px;height:20px;"/></div>
        </aura:set>
       </aura:if> 
       &nbsp;
       <aura:set attribute="else">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       </aura:set>
      </aura:if> 
      <a id="tree0-node0-0-link"  tabindex="-1" onclick="{!c.ChildshowHidePanel}" role="presentation">{!ChildInt.myIntName}</a>
     </div>
      
     <ul aura:id="{!ChildInt.myIntId}" id="{!ChildInt.myIntId}" style="display:none;" class="slds-tree__group slds-nested" role="group" aria-labelledby="tree0-node0-link">
      <aura:iteration items="{!ChildInt.myChildNodes}" var="GrandChildInt">
       <li id="tree0-node0-2" class="slds-tree__item" role="treeitem" aria-level="3" style="margin-left: 50px;">
        <!--<ui:inputCheckbox aura:id="checkbox" value="{!ChildInt.isSelected}"/>-->
        <a href="#" role="presentation" class="slds-truncate" style="color: darkgoldenrod;">{!GrandChildInt.myIntName}</a>     
       </li>
      </aura:iteration>
     </ul>   
                </li>
    <aura:set attribute="else">
     <li id="tree0-node0-1" class="slds-tree__item" role="treeitem" aria-level="2" style="margin-left: 50px;">
      <a href="#" role="presentation" class="slds-truncate" style="color: darkgoldenrod;">{!ChildInt.myIntName}</a>   
     </li>
    </aura:set>
    </aura:if> 
            </aura:iteration>
        </ul>
    </li>
</aura:component>

2-Controller Code :
({
    showHidePanel : function(component, event, helper) {
        var id=component.get("v.objInt.myIntId");        
        var e=document.getElementById(id);      
        if (e.style.display == 'block' || e.style.display==''){
            e.style.display = 'none';
            component.set("v.ext","plus");
        }else{
            e.style.display = 'block';
            component.set("v.ext","minus");
        } 
    },
 ChildshowHidePanel : function(component, event) 
    {
        var id=component.get("ChildInt.myIntId"); 
        var e=document.getElementById(id);      
        if (e.style.display == 'block' || e.style.display==''){
            e.style.display = 'none';
            component.set("v.extChild","plus");
        }else{
            e.style.display = 'block';
            component.set("v.extChild","minus");
        } 
    },
})

3-Result:


From above code piece , i want if user click on "Child Test1" then child "GrandChild Test2" should be visible. As of now its working for 1st level(i.e. when user clicks on "Test Parent" then it is working)
 From Controller code , we are calling "ChildshowHidePanel : function(component, event)" method on "Child Test1" click and gettting undefined value of id(var id=component.get("ChildInt.myIntId"); ).