function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Shilpa Goyal 9Shilpa Goyal 9 

display associated contact on button click in LWC

Hello ,
I have multiple contacts and their selected vehicle which they have to schedule for pickup and i have multiple buttons each associated with 1 contact but i want to show Vehicle name when schedule pickup button clicks, and i am showing that UI page by iteration. Can somebody help me how can i acheive this in LWC.
<template for:each={records} for:item ='record'>
       
    <div key = {record.Id} >
        <lightning-layout multiple-rows="true">
            <lightning-layout-item class="slds-p-around_xx-small" size="12">
              <lightning-layout>
               
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div style="display: inline-flex; width: 51%" class="slds-m-around_small">
                        <div style="font-size: 15px;"><b>{record.Model__c}</b></div>
                       
                       
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div></div>
                       
                    </div>
                  </lightning-layout-item>
               
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div style="font-size: 14px;">{record.Miles__c} Miles</div>
                       
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div style="font-size: 14px;">${record.Retail_Price__c}</div>
                       
                    </div>
                  </lightning-layout-item>
               
              </lightning-layout>
            </lightning-layout-item>
          </lightning-layout>
          <lightning-layout multiple-rows="true">
            <lightning-layout-item class="slds-p-around_xx-small" size="12">
              <lightning-layout>
               
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div style="display: inline-flex; width: 51%" class="slds-m-around_small">
                        <div style="font-size: 14px;"><b>Unit #{record.Name}</b></div>
                       
                       
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div style="font-size: 14px;">{record.PICK_UP_LOCATION__c}</div>
                       
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div style="font-size: 14px;"><b>Earliest Pickup Date</b></div>
                       
                    </div>
                  </lightning-layout-item>
               
                  <lightning-layout-item class="slds-p-around_xx-small" size=6>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div></div>
                       
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div></div>
                       
                    </div>
                    <div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
                        <div style="font-size: 14px;"><br><br>{dateValue}</div>
                       
                    </div>
                  </lightning-layout-item>
               
              </lightning-layout>
            </lightning-layout-item>
          </lightning-layout>
        <!-- <div class="slds-cell-wrap">{record.Model__c} &nbsp;&nbsp;
            {record.Miles__c} Miles
         </div>
         <div>{record.Retail_Price__c}</div>
       
       
        <div>Unit #{record.Name}</div>
        <div>{record.PICK_UP_LOCATION__c}</div>
        <div>Earliest Pickup date &nbsp;&nbsp; {dateValue} &nbsp;&nbsp;
        <lightning-formatted-date-time
        value={dateValue}
        year="numeric"
        month="numeric"
        day="numeric">
    </lightning-formatted-date-time>
   
    </div>-->
   
        <lightning-button class="button1" label="Schedule Pickup"  title="Schedule Pickup" onclick={handelButton1} disabled={slot1}></lightning-button>
    </div>
    </template>

Here is my code and UI view