fix(storefront): BCTHEME-1937 Bulk pricing modal on PLP only displays…

… information for the first product (#2501)

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Bulk pricing modal on PLP only displays information for the first product [#2501](https://github.com/bigcommerce/cornerstone/pull/2501)
 - Adding missing product reviews form validation [#2475](https://github.com/bigcommerce/cornerstone/pull/2475)
 - Fix GH build action & added package version and short commit hash to artifact names in GitHub Actions workflow for improved traceability and uniqueness. ([#2494](https://github.com/bigcommerce/cornerstone/pull/2494))
 - Bump stencil-utils to 6.18.0 ([#2493](https://github.com/bigcommerce/cornerstone/pull/2493))

templates/components/products/bulk-discount-rates.html

@@ -2,11 +2,11 @@
     {{#if product}}<dt class="productView-info-name">{{lang 'products.bulk_pricing.title'}}</dt>{{/if}}
     <dd class="productView-info-value">
         <a href="{{product.url}}#bulk_pricing"
-           {{#unless is_ajax }}data-reveal-id="modal-bulk-pricing"{{/unless}}>
+           {{#unless is_ajax }}data-reveal-id="modal-bulk-pricing{{#if id}}-{{id}}{{/if}}"{{/unless}}>
             {{lang 'products.bulk_pricing.view'}}
         </a>
     </dd>
-    <div id="modal-bulk-pricing" class="modal modal--small" data-reveal>
+    <div id="modal-bulk-pricing{{#if id}}-{{id}}{{/if}}" class="modal modal--small" data-reveal>
         <div class="modal-header">
             <h2 class="modal-header-title">{{lang 'products.bulk_pricing.modal_title'}}</h2>
             {{> components/common/modal/modal-close-btn}}