diff --git a/app/views/split_checkout/_payment.html.haml b/app/views/split_checkout/_payment.html.haml
index afde65a69e..68b0912a53 100644
--- a/app/views/split_checkout/_payment.html.haml
+++ b/app/views/split_checkout/_payment.html.haml
@@ -17,14 +17,15 @@
         = f.label :payment_method_id, "#{payment_method.name}", for: "payment_method_#{payment_method.id}"
         %em=payment_or_shipping_price(payment_method, @order)
 
-    = f.error_message_on :payment_method, standalone: true
-
-    - available_payment_methods.each do |payment_method|
-      .paymentmethod-container{id: "paymentmethod#{payment_method.id}", style: "display: #{payment_method.id == selected_payment_method ? "block" : "none"}"}
+      .paymentmethod-container{"data-paymentmethod-id": "paymentmethod#{payment_method.id}", style: "display: #{payment_method.id == selected_payment_method ? "block" : "none"}"}
         - if payment_method.description && !payment_method.description.empty?
           .paymentmethod-description.panel
             #{payment_method.description}
 
+    = f.error_message_on :payment_method, standalone: true
+
+    - available_payment_methods.each do |payment_method|
+      .paymentmethod-container{"data-paymentmethod-id": "paymentmethod#{payment_method.id}", style: "display: #{payment_method.id == selected_payment_method ? "block" : "none"}"}
         .paymentmethod-form
           = render partial: "split_checkout/payment/#{payment_method.method_type}", locals: { payment_method: payment_method, f: f }
           
diff --git a/app/webpacker/controllers/paymentmethod_controller.js b/app/webpacker/controllers/paymentmethod_controller.js
index e840c426e8..b7a1b27e8d 100644
--- a/app/webpacker/controllers/paymentmethod_controller.js
+++ b/app/webpacker/controllers/paymentmethod_controller.js
@@ -16,7 +16,9 @@ export default class extends Controller {
     const stripeCardSelector =
       this.application.getControllerForElementAndIdentifier(
         document
-          .getElementById(event.target.dataset.paymentmethodId)
+          .querySelector(
+            `[data-paymentmethod-id="${event.target.dataset.paymentmethodId}"]`
+          )
           .querySelector('[data-controller="stripe-cards"]'),
         "stripe-cards"
       );
@@ -27,7 +29,8 @@ export default class extends Controller {
     Array.from(
       document.getElementsByClassName("paymentmethod-container")
     ).forEach((container) => {
-      const enabled = container.id === paymentMethodContainerId;
+      const enabled =
+        container.dataset.paymentmethodId === paymentMethodContainerId;
 
       if (enabled) {
         container.style.display = "block";
diff --git a/spec/javascripts/stimulus/paymentmethod_controller_test.js b/spec/javascripts/stimulus/paymentmethod_controller_test.js
index b81dbbf605..483a159a80 100644
--- a/spec/javascripts/stimulus/paymentmethod_controller_test.js
+++ b/spec/javascripts/stimulus/paymentmethod_controller_test.js
@@ -18,19 +18,19 @@ describe("PaymentmethodController", () => {
          <input id="paymentmethod_2" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod2" data-paymentmethod-target="input" checked="checked" />
          <input id="paymentmethod_3" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod3" data-paymentmethod-target="input"/>
 
-         <div class="paymentmethod-container" id="paymentmethod1">
+         <div class="paymentmethod-container" id="paymentmethod1" data-paymentmethod-id="paymentmethod1">
           <input type="number" id="input1" />
           <select id="select1" >
             <option value="1">1</option>
           </select>
          </div>
-         <div class="paymentmethod-container" id="paymentmethod2">
+         <div class="paymentmethod-container" id="paymentmethod2" data-paymentmethod-id="paymentmethod2">
           <input type="number" id="input2" />
           <select id="select2" >
             <option value="1">1</option>
           </select>
          </div>
-         <div class="paymentmethod-container" id="paymentmethod3">
+         <div class="paymentmethod-container" id="paymentmethod3" data-paymentmethod-id="paymentmethod3">
           <input type="number" id="input3" />
           <select id="select3" >
             <option value="1">1</option>