Capture data element with multiple buttons in Javascript

I have a store selector page that has multiple buttons for a user to select a store. Each button has a data element identifying the store ID of corresponding button ("data-store-id").
When a user clicks on the button, I want to capture the id of the store.

I am using this selector, but it won’t capture the button that is clicked, it captures the id of the first button on the page. For instance, every time I run this, no matter what button I select, ID 0124 comes back. (I am running this script in Google Tag Manager, but testing in the Console, hence there is no onClick in the example below.)

How do I select the storeid of the corresponding button clicked, rather than the first button on the page?

document.querySelector('.button').getAttribute("data-store-id")

Here is the HTML from the page:

   <div class="store-locator__results set--w-100" data-has-results="" data-locator-component="result-list" data-modal-scrollable="">
       <div class="store-locator__result-item store-locator__result-content--selected">
           <input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{&quot;ID&quot;:&quot;0124&quot;,&quot;name&quot;:&quot;Southwest Plaza&quot;,&quot;address1&quot;:&quot;8501 West Bowles Ave&quot;,&quot;address2&quot;:null,&quot;city&quot;:&quot;Littleton&quot;,&quot;postalCode&quot;:&quot;80123&quot;,&quot;latitude&quot;:39.60997,&quot;longitude&quot;:-105.093443,&quot;stateCode&quot;:&quot;CO&quot;,&quot;countryCode&quot;:&quot;US&quot;}" disabled id="input-0124-1508743079257" name="store" type="radio" value="0124"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
           <div class="row">
               <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
               <div class="col-12 col-md-8">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
                   <div class="store-details text-line--medium" data-store-id="0124">
                       <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
                       <div class="store-name font-weight--bold">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257">Southwest Plaza</label>
                       </div>
                       <address class="text-color--grey-5">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.6660997,-105.093443" target="_blank">81 West Bowles Ave<br>
                           Littleton, CO 80123</a><br></label>
                       </address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
                   </div>
               </div>
               <div class="col-12 col-md-4 flex-justify-center text-align--center">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0124" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257">Set as My Store</label></button></label>
               </div>
           </div>
       </div>
       <div class="store-locator__result-item">
           <input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{&quot;ID&quot;:&quot;0131&quot;,&quot;name&quot;:&quot;Cherry Creek&quot;,&quot;address1&quot;:&quot;3000 E. 1st Ave., Ste 228&quot;,&quot;address2&quot;:null,&quot;city&quot;:&quot;Denver&quot;,&quot;postalCode&quot;:&quot;80206&quot;,&quot;latitude&quot;:39.717981,&quot;longitude&quot;:-104.952147,&quot;stateCode&quot;:&quot;CO&quot;,&quot;countryCode&quot;:&quot;US&quot;}" disabled id="input-0131-1508743079257" name="store" type="radio" value="0131"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
           <div class="row">
               <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
               <div class="col-12 col-md-8">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
                   <div class="store-details text-line--medium" data-store-id="0131">
                       <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
                       <div class="store-name font-weight--bold">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257">Cherry Creek</label>
                       </div>
                       <address class="text-color--grey-5">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.71796681,-104.9566147" target="_blank">30 E. 1st Ave., Ste 228<br>
                           Denver, CO 80206</a><br></label>
                       </address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
                   </div>
               </div>
               <div class="col-12 col-md-4 flex-justify-center text-align--center">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0131" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257">Set as My Store</label></button></label>
               </div>
           </div>
       </div>
       <div class="store-locator__result-item">
           <input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{&quot;ID&quot;:&quot;0176&quot;,&quot;name&quot;:&quot;Park Meadows&quot;,&quot;address1&quot;:&quot;8557 Park Meadows Center Dr&quot;,&quot;address2&quot;:null,&quot;city&quot;:&quot;Littleton&quot;,&quot;postalCode&quot;:&quot;80124&quot;,&quot;latitude&quot;:39.562013,&quot;longitude&quot;:-104.876046,&quot;stateCode&quot;:&quot;CO&quot;,&quot;countryCode&quot;:&quot;US&quot;}" disabled id="input-0176-1508743079257" name="store" type="radio" value="0176"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
           <div class="row">
               <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
               <div class="col-12 col-md-8">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
                   <div class="store-details text-line--medium" data-store-id="0176">
                       <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
                       <div class="store-name font-weight--bold">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257">Park Meadows</label>
                       </div>
                       <address class="text-color--grey-5">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.56t32013,-104.87633046" target="_blank">857 Park Meadows Center Dr<br>
                           Littleton, CO 80124</a><br></label>
                       </address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
                   </div>
               </div>
               <div class="col-12 col-md-4 flex-justify-center text-align--center">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"><span class="button button--secondary button--fluid button--rounded pointer--none set--w-100" data-locator-component="preferred-store" data-store-id="0176">My Store</span></label>
               </div><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
           </div>
       </div>
       <div class="store-locator__result-item">
           <input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{&quot;ID&quot;:&quot;0230&quot;,&quot;name&quot;:&quot;Colorado Mills&quot;,&quot;address1&quot;:&quot;14500 W. Colfax Avenue Ste #145&quot;,&quot;address2&quot;:null,&quot;city&quot;:&quot;Lakewood&quot;,&quot;postalCode&quot;:&quot;80401&quot;,&quot;latitude&quot;:39.734172,&quot;longitude&quot;:-105.157185,&quot;stateCode&quot;:&quot;CO&quot;,&quot;countryCode&quot;:&quot;US&quot;}" disabled id="input-0230-1508743079257" name="store" type="radio" value="0230"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
           <div class="row">
               <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
               <div class="col-12 col-md-8">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
                   <div class="store-details text-line--medium" data-store-id="0230">
                       <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
                       <div class="store-name font-weight--bold">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257">Colorado Mills</label>
                       </div>
                       <address class="text-color--grey-5">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.734gg172,-105.157185" target="_blank">134500 W. Colfax Avenue Ste #145<br>
                           Lakewood, CO 80401</a><br></label>
                       </address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
                   </div>
               </div>
               <div class="col-12 col-md-4 flex-justify-center text-align--center">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0230" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257">Set as My Store</label></button></label>
               </div>
           </div>
       </div>
   </div>

>Solution :

You can use document.querySelectorAll to match all .button elements. Then you can iterate them all using forEach. In this example I bound all elements to the click event:

document.querySelectorAll('.button').forEach( function(theButton) {
  theButton.addEventListener( 'click', function() {
    const theStoreID = this.getAttribute('data-store-id')
    alert(theStoreID)
  })
})

<div class="store-locator__results set--w-100" data-has-results="" data-locator-component="result-list" data-modal-scrollable="">
       <div class="store-locator__result-item store-locator__result-content--selected">
           <input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{&quot;ID&quot;:&quot;0124&quot;,&quot;name&quot;:&quot;Southwest Plaza&quot;,&quot;address1&quot;:&quot;8501 West Bowles Ave&quot;,&quot;address2&quot;:null,&quot;city&quot;:&quot;Littleton&quot;,&quot;postalCode&quot;:&quot;80123&quot;,&quot;latitude&quot;:39.60997,&quot;longitude&quot;:-105.093443,&quot;stateCode&quot;:&quot;CO&quot;,&quot;countryCode&quot;:&quot;US&quot;}" disabled id="input-0124-1508743079257" name="store" type="radio" value="0124"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
           <div class="row">
               <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
               <div class="col-12 col-md-8">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
                   <div class="store-details text-line--medium" data-store-id="0124">
                       <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
                       <div class="store-name font-weight--bold">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257">Southwest Plaza</label>
                       </div>
                       <address class="text-color--grey-5">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.6660997,-105.093443" target="_blank">81 West Bowles Ave<br>
                           Littleton, CO 80123</a><br></label>
                       </address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"></label>
                   </div>
               </div>
               <div class="col-12 col-md-4 flex-justify-center text-align--center">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0124" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0124-1508743079257">Set as My Store</label></button></label>
               </div>
           </div>
       </div>
       <div class="store-locator__result-item">
           <input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{&quot;ID&quot;:&quot;0131&quot;,&quot;name&quot;:&quot;Cherry Creek&quot;,&quot;address1&quot;:&quot;3000 E. 1st Ave., Ste 228&quot;,&quot;address2&quot;:null,&quot;city&quot;:&quot;Denver&quot;,&quot;postalCode&quot;:&quot;80206&quot;,&quot;latitude&quot;:39.717981,&quot;longitude&quot;:-104.952147,&quot;stateCode&quot;:&quot;CO&quot;,&quot;countryCode&quot;:&quot;US&quot;}" disabled id="input-0131-1508743079257" name="store" type="radio" value="0131"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
           <div class="row">
               <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
               <div class="col-12 col-md-8">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
                   <div class="store-details text-line--medium" data-store-id="0131">
                       <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
                       <div class="store-name font-weight--bold">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257">Cherry Creek</label>
                       </div>
                       <address class="text-color--grey-5">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.71796681,-104.9566147" target="_blank">30 E. 1st Ave., Ste 228<br>
                           Denver, CO 80206</a><br></label>
                       </address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"></label>
                   </div>
               </div>
               <div class="col-12 col-md-4 flex-justify-center text-align--center">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0131" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0131-1508743079257">Set as My Store</label></button></label>
               </div>
           </div>
       </div>
       <div class="store-locator__result-item">
           <input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{&quot;ID&quot;:&quot;0176&quot;,&quot;name&quot;:&quot;Park Meadows&quot;,&quot;address1&quot;:&quot;8557 Park Meadows Center Dr&quot;,&quot;address2&quot;:null,&quot;city&quot;:&quot;Littleton&quot;,&quot;postalCode&quot;:&quot;80124&quot;,&quot;latitude&quot;:39.562013,&quot;longitude&quot;:-104.876046,&quot;stateCode&quot;:&quot;CO&quot;,&quot;countryCode&quot;:&quot;US&quot;}" disabled id="input-0176-1508743079257" name="store" type="radio" value="0176"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
           <div class="row">
               <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
               <div class="col-12 col-md-8">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
                   <div class="store-details text-line--medium" data-store-id="0176">
                       <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
                       <div class="store-name font-weight--bold">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257">Park Meadows</label>
                       </div>
                       <address class="text-color--grey-5">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.56t32013,-104.87633046" target="_blank">857 Park Meadows Center Dr<br>
                           Littleton, CO 80124</a><br></label>
                       </address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
                   </div>
               </div>
               <div class="col-12 col-md-4 flex-justify-center text-align--center">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"><span class="button button--secondary button--fluid button--rounded pointer--none set--w-100" data-locator-component="preferred-store" data-store-id="0176">My Store</span></label>
               </div><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0176-1508743079257"></label>
           </div>
       </div>
       <div class="store-locator__result-item">
           <input class="store-locator__result-check visually-hidden" data-locator-component="store-info" data-store-info="{&quot;ID&quot;:&quot;0230&quot;,&quot;name&quot;:&quot;Colorado Mills&quot;,&quot;address1&quot;:&quot;14500 W. Colfax Avenue Ste #145&quot;,&quot;address2&quot;:null,&quot;city&quot;:&quot;Lakewood&quot;,&quot;postalCode&quot;:&quot;80401&quot;,&quot;latitude&quot;:39.734172,&quot;longitude&quot;:-105.157185,&quot;stateCode&quot;:&quot;CO&quot;,&quot;countryCode&quot;:&quot;US&quot;}" disabled id="input-0230-1508743079257" name="store" type="radio" value="0230"> <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
           <div class="row">
               <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
               <div class="col-12 col-md-8">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
                   <div class="store-details text-line--medium" data-store-id="0230">
                       <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
                       <div class="store-name font-weight--bold">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257">Colorado Mills</label>
                       </div>
                       <address class="text-color--grey-5">
                           <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"><a class="store-map link link--underline-hover" href="https://maps.google.com/?daddr=39.734gg172,-105.157185" target="_blank">134500 W. Colfax Avenue Ste #145<br>
                           Lakewood, CO 80401</a><br></label>
                       </address><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"></label>
                   </div>
               </div>
               <div class="col-12 col-md-4 flex-justify-center text-align--center">
                   <label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257"><button class="button button--primary button--fluid button--rounded set--w-100" data-locator-component="set-preferred-store" data-store-id="0230" type="button"><label class="store-locator__result-content store-locator__result-content--disabled" for="input-0230-1508743079257">Set as My Store</label></button></label>
               </div>
           </div>
       </div>
   </div>