Hi All,

I am working on a PoC where i need to display sobject records cards. But when i do i have few hyperlinks on each card onclick of which i want my card to be resized. I used addstyle but am not able to do it for more than 1 record.
Also, is there any way to store the card size for that particular user? i.e when i resize the card it should be visible with the same size next time the user visits the page.

<aura:component controller="tileController">
    <aura:attribute name="tiles" type="TileRecord__c[]" />
    <aura:attribute name="tileCount" type="Integer" default="0" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <lightning:layout multipleRows="true">
      
        <aura:iteration items="{!v.tiles}" var="tile" indexVar="index">
            <lightning:layoutItem padding="around-small" size="10" smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="4" >
               
                <article aura:id="{!tile.Id}" class="slds-card slds-card__narrow slds-size_2-of-3" style="padding-left: 10px;" data-row-index="{!index}">
                    <a href="{! '#tiles/' + tile.Id }">
                        
                        <span class="slds-badge">{!tile.Name}</span>
                    </a>
                    
                    <!--<lightning:button label="Toggle" onclick="{!c.resizeToSmall}"/> -->
                    <p><!--<ui:button aura:id="sml" press="{!c.resizeToSmall}">s</ui:button> -->
                        <a aura:id="md" href="javascript:void(0)" onclick="{!c.resizeToSmall}">s</a>
                        <a aura:id="md" href="javascript:void(0)" onclick="{!c.resizeToMedium}">m</a>
                        <a aura:id ="lg" href="javascript:void(0)" onclick="{!c.resizeToLarge}">l</a>
                    </p>
                    
                    <p>{!tile.Description__c}</p>
                    <p style="color:red; font-weight:bold;">{!index}</p>
                    
                    <a href="javascript:void(0)" onclick="{!c.doSomething}">
                        Click me to do Something </a>
                    
                </article>
                  
            </lightning:layoutItem>
        </aura:iteration>
       
    </lightning:layout>    
    
</aura:component>

Controller :
({
	doInit : function(component, event, helper) {
		var tiles=component.get("c.displayTiles");
        tiles.setCallback(this,function(a){
            component.set("v.tiles",a.getReturnValue());    
        });
        $A.enqueueAction(tiles);//tiles ---> action on server side	
	},
    applyCSS: function(cmp, event) {
        //var href = event.currentTarget;
        //$A.util.addClass(href, 'changeMe');
         var cmpTarget = cmp.find('{!tile.Id}');
        $A.util.addClass(cmpTarget, 'changeMe');
    },
    resizeToSmall:function(component, event, helper){
//OnClick on s,m,l hyperlinks on the component it should be resized.
       	/*var src = event.getSource().getLocalId();
        
        var cmpTarget = component.find('changeIt');
        $A.util.addClass(src, 'changeMe');
        console.log('After');*/
        var cmpTarget = component.find('{!tile.Id}');
        console.log('target'+cmpTarget);
        var arr = [];
        //arr = component.find("main").getElement().childNodes;
        //console.log(event.target);
        
        
    },
    resizeToLarge:function(component, event, helper){
        
        console.log('Large');
    },
    resizeToMedium:function(component, event, helper){
        
        console.log('Medium');
    },
    doSomething : function(component,event, helper) {
       console.log('Hey There .. the anchor was clicked');
       console.log(event);
       var href = event.srcElement.href;
       console.log(href);

    } 
})