Hi  MyDev Training,

I am facing similar kinda problem.

Can u pls help me to resolve this. In below image Accordion is displaying from one div and counter (Counter - Lightning Design System) is disaplying from another div both are in <div class="slds-grid slds-gutters">

Now whenever I clicked + / - icon it is increasing values for both Test_arun and Uniontown but in my scnario it should not for both It should for only one. and based upon that I need to get which which is not having 0 so that I could understand that is selected indirectly.

My code in HTML :

<template if:true={configName}>
                            <lightning-accordion onsectiontoggle={handleSectionToggle}>
                                <template for:each={configName} for:item="configs" for:index="index">
                                    <div class="slds-grid slds-gutters" key={configs} data-id="mydiv">
                                        <div class="slds-col slds-size_9-of-12">
                                            <lightning-accordion-section key={configs} name={configs} label={configs} style="padding: unset;">
                                                <template if:true={lineItemList} >
                                                    <table class="slds-table slds-table_bordered slds-table_striped slds-table_fixed-layout">
                                                        <tbody>
                                                            <tr>
                                                                <th scope="col" style="color: rgb(0, 109, 204);"><div class="slds-truncate">Name</div>  </th>
                                                                <th scope="col" style="color: rgb(0, 109, 204);"><div class="slds-truncate">Quantity</div>  </th>
                                                                <th scope="col" style="color: rgb(0, 109, 204);"><div class="slds-truncate">Price</div>  </th>
                                                            </tr>
                                                            
                                                            <template for:each={lineItemList} for:item="lidetail">    
                                                                <tr key={lidetail}>                                                        
                                                                    <td key={lidetail.Name}>{lidetail.Name}</td>
                                                                    <td key={lidetail.Apttus_Config2__Quantity__c}>{lidetail.Apttus_Config2__Quantity__c}</td>
                                                                    <td key={lidetail.Apttus_Config2__NetPrice__c}>{lidetail.Apttus_Config2__NetPrice__c}</td>
                                                                </tr>
                                                            </template>
                                                        </tbody>
                                                    </table>
                                                </template>                                        
                                            </lightning-accordion-section>
                                        </div>
                                        <div class="slds-col slds-size_3-of-12">
                                                <div class="slds-form-element__control slds-size-xx_small">
                                                    <button class="slds-button slds-button_icon slds-button_icon-small slds-input__button_decrement" 
                                                            title="Decrement Quantity" onclick={handleDecrementCounter} data-id={configs}>
                                                        <svg class="slds-button__icon" aria-hidden="true">
                                                            <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg#ban"></use>
                                                        </svg>
                                                        <span class="slds-assistive-text">Decrement Quantity</span>
                                                    </button>
                                                        <input type="number"  placeholder="0" name="quantity" value={value} min="1" max="100" class="slds-input slds-input_counter" />
                                                    <button class="slds-button slds-button_icon slds-button_icon-small slds-input__button_increment" 
                                                            title="Increment Quantity" onclick={handleIncrementCounter} data-id={configs}>
                                                        <svg class="slds-button__icon" aria-hidden="true">
                                                            <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg#new"></use>
                                                        </svg>
                                                        <span class="slds-assistive-text">Increment Quantity</span>
                                                    </button>
                                                </div>
                                        </div>
                                    </div>
                                </template>
                            </lightning-accordion>
                        </template>

@track value=0;
    handleIncrementCounter(event){
        alert('open section name : '+this.activeSectionMessage);
        const recId = event.currentTarget.dataset.id;
        alert('recId'+recId);
        const inputValue = event.target.value;
        if(this.activeSectionMessage === recId){
            this.value++;
        }
        
        // var value = parseInt(document.getElementById("data-id").value, 0);
        // alert('value : '+value);
        // value = isNaN(value) ? 0 : value;
        // value++;
        // alert('value : '+value);
        // event.target.getAttribute("data-id").value = value;
        
    }
    handleDecrementCounter(event){
        alert('open section name : '+this.activeSectionMessage);
        const recId = event.currentTarget.dataset.id;
        alert('recId'+recId);
        alert('remove');
        const inputValue = event.target.value;
        
        this.value--;
        alert('inputValue : '+inputValue);
    }