diff --git a/maintenance/maintenance.html b/maintenance/maintenance.html
index ec9349cf7a7..ff488b359ba 100644
--- a/maintenance/maintenance.html
+++ b/maintenance/maintenance.html
@@ -78,7 +78,7 @@
                                                 </div>
                                             </div>
                                             <div class="donate-btn-wrapper">
-                                                <a id="donate-header-btn" class="tw-btn-pop" href="?form=donate">Donate</a>
+                                                <a data-donate-header-button class="tw-btn-pop" href="?form=donate">Donate</a>
                                             </div>
                                         </div>
                                     </div>
diff --git a/maintenance/static/css/main.css b/maintenance/static/css/main.css
index 77796808a3d..8051dfc622c 100644
--- a/maintenance/static/css/main.css
+++ b/maintenance/static/css/main.css
@@ -8258,12 +8258,12 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
     #primary-nav-container .menu-container {
       padding: 16px 0; } }
 
-#primary-nav-container #donate-header-btn {
+#primary-nav-container [data-donate-header-button] {
   font-size: 17px;
   line-height: 1.35294;
   color: #000000;
   font-weight: 700; }
-  #primary-nav-container #donate-header-btn:hover {
+  #primary-nav-container [data-donate-header-button]:hover {
     color: #0d10bf;
     cursor: pointer; }
 
diff --git a/network-api/networkapi/templates/fragments/buyersguide/pni_nav_links.html b/network-api/networkapi/templates/fragments/buyersguide/pni_nav_links.html
index 608aed9601f..c10c7406489 100644
--- a/network-api/networkapi/templates/fragments/buyersguide/pni_nav_links.html
+++ b/network-api/networkapi/templates/fragments/buyersguide/pni_nav_links.html
@@ -17,5 +17,5 @@
 {% endwith %}
 {% routablepageurl home_page 'about-why-view' as about_why_url %}
 <a class="{{ class }} {% bg_active_nav request.get_full_path about_why_url %}" href="{{ about_why_url }}">{% trans "About" %}</a>
-<a id="donate-header-btn" class="{{ class }}" href="?form=donate&utm_medium=FMO&utm_source=PNI&utm_campaign=23-PNI&utm_content=header&c_id=7014x000000eQOD">{% trans "Donate" %}</a>
+<a data-donate-header-button class="{{ class }}" href="?form=donate&utm_medium=FMO&utm_source=PNI&utm_campaign=23-PNI&utm_content=header&c_id=7014x000000eQOD">{% trans "Donate" %}</a>
 {{ post }}
diff --git a/network-api/networkapi/templates/fragments/primary_nav.html b/network-api/networkapi/templates/fragments/primary_nav.html
index 07d31e8b819..882a2f6b69f 100644
--- a/network-api/networkapi/templates/fragments/primary_nav.html
+++ b/network-api/networkapi/templates/fragments/primary_nav.html
@@ -63,7 +63,7 @@
 
                     {% block donate_and_newsletter %}
                         <div class="d-flex align-items-center">
-                            <a id="donate-header-btn" class="primary-nav-special-link tw-heart-glyph tw-flex" href="?form=donate">{% trans "Donate" %}</a>
+                            <a data-donate-header-button class="primary-nav-special-link tw-heart-glyph tw-flex" href="?form=donate">{% trans "Donate" %}</a>
                             {% if page.signup == None %}<button class="tw-btn-secondary btn-newsletter d-none d-lg-block ml-md-3">{% trans "Newsletter" %}</button>{% endif %}
                         </div>
                     {% endblock %}
diff --git a/network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html b/network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html
index 6776d6ed2f1..c7d4bcff823 100644
--- a/network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html
+++ b/network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html
@@ -77,7 +77,7 @@
                                                 </div>
                                             </div>
                                             <div class="donate-btn-wrapper">
-                                                <a id="donate-header-btn" class="tw-btn-pop" href="?form=donate">Donate</a>
+                                                <a data-donate-header-button class="tw-btn-pop" href="?form=donate">Donate</a>
                                             </div>
                                         </div>
                                     </div>
diff --git a/source/js/buyers-guide/analytics-events.js b/source/js/buyers-guide/analytics-events.js
index 6f14a161dce..d4c5c70e301 100644
--- a/source/js/buyers-guide/analytics-events.js
+++ b/source/js/buyers-guide/analytics-events.js
@@ -9,7 +9,7 @@ import { ReactGA, GoogleAnalytics } from "../common";
 function getQuerySelectorEvents(pageTitle, productName) {
   return {
     // "site-wide" events
-    "#donate-header-btn": {
+    "[data-donate-header-button]": {
       category: `buyersguide`,
       action: `donate tap`,
       label: `${pageTitle} donate header`,
diff --git a/source/js/common/template-js-handles/header-donate-button.js b/source/js/common/template-js-handles/header-donate-button.js
index 9520fac9725..4e95d3928ef 100644
--- a/source/js/common/template-js-handles/header-donate-button.js
+++ b/source/js/common/template-js-handles/header-donate-button.js
@@ -1,17 +1,21 @@
 import { ReactGA } from "../../common";
 
 /**
- * Bind click handler to #donate-header-btn
+ * Bind click handler to data-donate-header-button
  * ("Donate" button on primary nav)
  */
 export default () => {
-  let donateHeaderBtn = document.getElementById(`donate-header-btn`);
-  if (donateHeaderBtn) {
-    donateHeaderBtn.addEventListener(`click`, () => {
-      ReactGA.event({
-        category: `donate`,
-        action: `donate button tap`,
-        label: `${document.title} header`,
+  const donateHeaderBtn = document.querySelectorAll(
+    "[data-donate-header-button]"
+  );
+  if (donateHeaderBtn.length > 0) {
+    donateHeaderBtn.forEach((element) => {
+      element.addEventListener(`click`, () => {
+        ReactGA.event({
+          category: `donate`,
+          action: `donate button tap`,
+          label: `${document.title} header`,
+        });
       });
     });
   }