Button behaving globally and not for each item in Salesforce LWC - apex

Question

I am quite new to Lighting Web Component. However, I have some experience with other component base frameworks.
I'm creating a button for each item and when the button is clicked for each item. It applies to all items. In other words, when one clicks 'Extend' it is meant to show a date input for that specific item but it shows too all of them. This is how my code looks like:
<template>
<template if:true={subscriptionData}>
<template for:each={subscriptionData} for:item="subscriptionItem">
<div key={subscriptionItem.Id}>
<div>
<div class="slds-grid slds-gutters slds-grid_vertical-align-center">
<div class="slds-col custom-card-title-container">
<h2 class="custom-title">{subscriptionItem.SBQQ__ProductName__c}</h2>
</div>
<div class="slds-col button-custom">
<lightning-button label="Extend" title="Non-primary action" onclick={handleShowEditEndDate} class="slds-m-right_none custom-margin"></lightning-button>
</div>
</div>
<div class="slds-grid slds-m-top_xx-small">
<div class="slds-col">
<div class="slds-grid slds-grid_vertical">
<div class="slds-col slds-m-bottom_xx-small">
<span>Start Date</span>
</div>
<div class="slds-col">
<span>{subscriptionItem.SBQQ__StartDate__c}</span>
</div>
</div>
</div>
<div class="slds-col">
<div class="slds-grid slds-grid_vertical">
<div class="slds-col slds-m-bottom_xx-small">
<span>End Date</span>
</div>
<div class="slds-col">
<span>{subscriptionItem.SBQQ__EndDate__c}</span>
</div>
</div>
</div>
<div class="slds-col">
<div class="slds-grid slds-grid_vertical">
<div class="slds-col slds-m-bottom_xx-small">
<span>Quantity</span>
</div>
<div class="slds-col">
<span>{subscriptionItem.SBQQ__Quantity__c}</span>
</div>
</div>
</div>
</div>
<template if:true={showEditField}>
<lightning-layout multiple-rows class="slds-m-top_xx-small">
<lightning-layout-item size="8">
<lightning-input
type="date"
name="endDateInput"
label="End Date"
variant="label-inline"
>
</lightning-input>
</lightning-layout-item>
</lightning-layout>
</template>
<hr class = "custom-line">
</div>
</div>
</template>
</template>
export default class ExtendCPQSubscriptionLWC extends LightningElement {
#api recordId;
#track subscriptionData;
#track columns = columns;
showEditField = false
#wire(getSubscriptionsLWC, { recordId: '$recordId'})
loadFoundSubscriptions({error, data}) {
if (data) {
console.log('OK');
console.log(data);
this.subscriptionData = data;
} else if (error) {
console.log('ERR ' + JSON.stringify(error));
}
}
I would appreciate any input thanks in advance.

Answer 1

You have common showEditField used to control visibility/addition of date input. My recommendation is to move that information inside subscriptionData and update the track variable. This would trigger re-render of UI and only show that field for item, for which Extend button was clicked