I had a multiselect picklist called Amenities on Property object with Parking​,Wifi​,Restaurant​,Playground​,Garden​ values.
I created a lightning component to display those values with lightning button icon.

<aura:component implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader, force:hasRecordId">

    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordError" type="String"/>
    <!--<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>-->

    <force:recordData aura:id="recordLoader"
      layoutType="FULL"
      recordId="{!v.recordId}"
      targetFields="{!v.simpleRecord}"
      targetError="{!v.recordError}"
      mode="EDIT"
      recordUpdated="{!c.handleRecordUpdated}"
      />
    <h2><lightning:icon iconName="utility:magicwand" />Amenities</h2><br/>
            <lightning:buttonIcon iconName="utility:travel_and_places" alternativeText="Parking" size="medium" />
            <lightning:buttonIcon iconName="utility:wifi" alternativeText="Wifi" size="medium" />
            <lightning:buttonIcon iconName="utility:food_and_drink" alternativeText="Restaurant" size="medium" />
            <lightning:buttonIcon iconName="utility:activity" alternativeText="PlayGround" size="medium" />
            <lightning:buttonIcon iconName="utility:classic_interface" alternativeText="Garden" size="medium" />
	

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>
</aura:component>

({
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "LOADED") {
           // record is loaded (render other component which needs record data value)
            console.log("Record is loaded successfully.");
        } else if(eventParams.changeType === "CHANGED") {
            // record is changed
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted
        } else if(eventParams.changeType === "ERROR") {
            // there’s an error while loading, saving, or deleting the record
        }
    }
})

Now i need to achieve the task:on clicking any amenity icon its variant should toggle between brand and border. Additionally, the amenities field of the property need to be updated accordingly.​