COMPONENT
---------------------
<aura:component >
    <aura:attribute name="recordList" type="object" />
    <aura:attribute name="beerId" type="string"/>

   <div class="slds-p-arround_small" style="background-color: powderblue;" >
   <div class="slds-grid slds-wrap">
   <aura:iteration items="{!v.recordList}" var="item">
        <div class="slds-col slds-size_1-of-4 slds-p-around_small" >       
        <lightning:card title="{!item.Name}" footer="{!item.Brewery_Name__c}" 
                        iconName="custom:custom7" >
            <p class="slds-p-horizontal_small">
                <div class="slds-grid slds-gutters">
                    <div class="slds-col slds-size_1-of-3">
                        <img src="{!$Resource.beer}" />
                    </div>
                    <div class="slds-col slds-size_2-of-3">
                      Name: {!item.Name} <br/>
                      Id : {!item.Id__c} <br/>
                      Alcohol% : {!item.Alcohol__c} <br/>
                    </div>
                </div>
            </p>
            <aura:set attribute="actions" >
                <lightning:button name="{!item.Id}" label="View Detail" variant="brand" onclick="{!c.showInfo}"/>
               
            </aura:set>
             </lightning:card>
             </div>      
       </aura:iteration>
       </div>
       <c:beerDetails  />
       </div>

</aura:component>

CONTROLLER
---------------------
({
    showInfo : function(component, event, helper) {
       
        var a = event.getSource();
  var beer = a.get('v.name'); 
     var a = component.set("v.beerId" , beer);
   alert(a);
    }
})

*ALERT SHOWS UNDEFINED

BeerSearchData.cmp
____________________
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="iden" type="String"/>
     <lightning:overlayLibrary aura:id="overlayLib"/>
    <div class="c-container">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
            <aura:iteration items="{!v.recordList}" var="con">
                <lightning:layoutItem size="4" padding="around-small">
                    <div class="custom-box">
                        <lightning:card title="{!con.Beer_Name__c}"  iconName="custom:custom56" >
                            Alcohol % : {!con.Alcohol__c}&nbsp;
                            Price : {!con.Price__c}
                            <div class="slds-col slds-size_4-of-8">
                                <img src="{!$Resource.BeerImage}"/>
                            </div>
<aura:set attribute="actions">
<lightning:button name="{!con.Id}" label="View Details" onclick="{!c.detailspage}" variant="brand"/>
</aura:set>
                        </lightning:card>
                    </div>
                </lightning:layoutItem>
            </aura:iteration>
        </lightning:layout>
    </div>
    <div>
    </div>
</aura:component>

BeerSearchDataController.js
________________________

({
    detailspage : function(component, event, helper) {
    var eventSource = event.getSource();
       var beerObj = eventSource.get('v.name');
        component.set('v.iden',beerObj);
        component.set('v.truthy',true);
         $A.createComponent(
             "c:BeerDetails",
            {
                "v.iden": "beerObj",
            },
            function(BeerDetails, status, errorMessage){
               if (status === "SUCCESS") {
                   component.find('overlayLib').showCustomModal({
                       header: "Beer Details",
                       body: BeerDetails,
                       showCloseButton: true,
                       closeCallback: function() {
                           alert('You closed the alert!');
                       }
                   })
               }
           });
               
                     
}
});


BeerDetails.cmp
_______________
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <aura:attribute name="beerId" type="String"/>
    <lightning:recordForm
        recordId="{!v.beerId}"
        objectApiName="Beer__c"
        layoutType="Full"
        columns="2"
        mode="view" />
  <div>
<lightning:button label="Order Now!" onclick="{!doOrder}" variant="brand"/>
</div>
</aura:component>
 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="iden" type="String"/>    
      <aura:iteration items="{!v.recordList}" var="con">
       <div class="c-container">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
             <lightning:layoutItem size="4" padding="around-small">
                 <div class="custom-box">
                 <lightning:card title="{!con.Beer_Name__c}"  iconName="custom:custom56" >
              Alcohol % : {!con.Alcohol__c}&nbsp;
                  Price : {!con.Price__c}
            <div class="slds-col slds-size_4-of-8">
                <img src="{!$Resource.BeerImage}"/>
            </div>   
              <aura:set attribute="actions">
                <lightning:button name="{!con.Id}"  label="View Details" onclick="{!c.detailspage}" variant="brand"/>
            </aura:set>
             </lightning:card>             
            </div>
            
            </lightning:layoutItem>
           </lightning:layout>

            </div>     
           </aura:iteration>      
    <div>
        <c:BeerDetails beerId="{!v.iden}"/>
    </div> 
</aura:component>

COMPONENT
---------------------
<aura:component >
    <aura:attribute name="recordList" type="object" />
    <aura:attribute name="beerId" type="string"/>

   <div class="slds-p-arround_small" style="background-color: powderblue;" >
   <div class="slds-grid slds-wrap">
   <aura:iteration items="{!v.recordList}" var="item">
        <div class="slds-col slds-size_1-of-4 slds-p-around_small" >       
        <lightning:card title="{!item.Name}" footer="{!item.Brewery_Name__c}" 
                        iconName="custom:custom7" >
            <p class="slds-p-horizontal_small">
                <div class="slds-grid slds-gutters">
                    <div class="slds-col slds-size_1-of-3">
                        <img src="{!$Resource.beer}" />
                    </div>
                    <div class="slds-col slds-size_2-of-3">
                      Name: {!item.Name} <br/>
                      Id : {!item.Id__c} <br/>
                      Alcohol% : {!item.Alcohol__c} <br/>
                    </div>
                </div>
            </p>
            <aura:set attribute="actions" >
                <lightning:button name="{!item.Id}" label="View Detail" variant="brand" onclick="{!c.showInfo}"/>
               
            </aura:set>
             </lightning:card>
             </div>      
       </aura:iteration>
       </div>
       <c:beerDetails  />
       </div>

</aura:component>

CONTROLLER
---------------------
({
    showInfo : function(component, event, helper) {
       
        var a = event.getSource();
  var beer = a.get('v.name'); 
     var a = component.set("v.beerId" , beer);
   alert(a);
    }
})

*ALERT SHOWS UNDEFINED

BeerSearchData.cmp
____________________
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="iden" type="String"/>
     <lightning:overlayLibrary aura:id="overlayLib"/>
    <div class="c-container">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
            <aura:iteration items="{!v.recordList}" var="con">
                <lightning:layoutItem size="4" padding="around-small">
                    <div class="custom-box">
                        <lightning:card title="{!con.Beer_Name__c}"  iconName="custom:custom56" >
                            Alcohol % : {!con.Alcohol__c}&nbsp;
                            Price : {!con.Price__c}
                            <div class="slds-col slds-size_4-of-8">
                                <img src="{!$Resource.BeerImage}"/>
                            </div>
<aura:set attribute="actions">
<lightning:button name="{!con.Id}" label="View Details" onclick="{!c.detailspage}" variant="brand"/>
</aura:set>
                        </lightning:card>
                    </div>
                </lightning:layoutItem>
            </aura:iteration>
        </lightning:layout>
    </div>
    <div>
    </div>
</aura:component>

BeerSearchDataController.js
________________________

({
    detailspage : function(component, event, helper) {
    var eventSource = event.getSource();
       var beerObj = eventSource.get('v.name');
        component.set('v.iden',beerObj);
        component.set('v.truthy',true);
         $A.createComponent(
             "c:BeerDetails",
            {
                "v.iden": "beerObj",
            },
            function(BeerDetails, status, errorMessage){
               if (status === "SUCCESS") {
                   component.find('overlayLib').showCustomModal({
                       header: "Beer Details",
                       body: BeerDetails,
                       showCloseButton: true,
                       closeCallback: function() {
                           alert('You closed the alert!');
                       }
                   })
               }
           });
               
                     
}
});


BeerDetails.cmp
_______________
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <aura:attribute name="beerId" type="String"/>
    <lightning:recordForm
        recordId="{!v.beerId}"
        objectApiName="Beer__c"
        layoutType="Full"
        columns="2"
        mode="view" />
  <div>
<lightning:button label="Order Now!" onclick="{!doOrder}" variant="brand"/>
</div>
</aura:component>
 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="iden" type="String"/>    
      <aura:iteration items="{!v.recordList}" var="con">
       <div class="c-container">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
             <lightning:layoutItem size="4" padding="around-small">
                 <div class="custom-box">
                 <lightning:card title="{!con.Beer_Name__c}"  iconName="custom:custom56" >
              Alcohol % : {!con.Alcohol__c}&nbsp;
                  Price : {!con.Price__c}
            <div class="slds-col slds-size_4-of-8">
                <img src="{!$Resource.BeerImage}"/>
            </div>   
              <aura:set attribute="actions">
                <lightning:button name="{!con.Id}"  label="View Details" onclick="{!c.detailspage}" variant="brand"/>
            </aura:set>
             </lightning:card>             
            </div>
            
            </lightning:layoutItem>
           </lightning:layout>

            </div>     
           </aura:iteration>      
    <div>
        <c:BeerDetails beerId="{!v.iden}"/>
    </div> 
</aura:component>