Hello everyone

need small help

 i have designed a lightning components, where it only showcases Button UI;s(Booked/Available) (Please see the snapshots) Now i need to design a logic,
Requirement 1 - when i updated the block in the opportunity detail page, the same should get updated in appartments object and Block objects (opportunity,apartment,block are inter connected) Requirement 2 - Now when a user books a block, another user should not be able to book that same block

i have build only the UI in and not the logic part, anyone please help with the logic

controllers <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <P> Floor No 1 </P> <div onclick="{!c.handleButtonChange}"> <button id="btn1" class="slds-button slds-button_neutral" style="color:black; background-color:green"> 101 - 1BHK</button> <button id="btn2" class="slds-button slds-button_neutral" style="color:black; background-color:green"> 102 - 2BHK </button> </div> <P> Floor No 2 </P> <div onclick="{!c.handleButtonChange}"> <button id="btn3" class="slds-button slds-button_neutral" style="color:black; background-color:green"> 201 - 1BHK </button> <button id="btn4" class="slds-button slds-button_neutral" style="color:black; background-color:green"> 202 - 2BHK </button> </div> <P> Floor No 3 </P> <div onclick="{!c.handleButtonChange}"> <button id="btn5" class="slds-button slds-button_neutral" style="color:black; background-color:green"> 301 - 1BHK</button> <button id="btn6" class="slds-button slds-button_neutral" style="color:black; background-color:green"> 302 - 2BHK</button> </div> <P> Floor No 4 </P> <div onclick="{!c.handleButtonChange}"> <button id="btn7" class="slds-button slds-button_neutral" style="color:black; background-color:green"> 401 - 1BHK </button> <button id="btn8" class="slds-button slds-button_neutral" style="color:black; background-color:green"> 402 - 2BHK </button> </div> </aura:component> ====================================================================== controller ({ handleButtonChange : function(component, event, helper) { var button_id = event.target.id; var button_text = document.getElementById(button_id).innerHTML; if(button_text.endsWith("Available")) { document.getElementById(button_id).innerHTML = "Booked"; document.getElementById(button_id).style.backgroundColor = "Red"; } else { document.getElementById(button_id).innerHTML = "Available"; document.getElementById(button_id).style.backgroundColor = "Green"; } }, }) ====================================================================== app <aura:application extends="force:slds" > <c:Test /> <c:Test1controller /> </aura:application>