複数のStripe Element決済フォームを一ページで表示したい（javascript）

いつもお世話になっております。

Stripe Elementを使って、ユーザーがPlanを選択できるように実装したいと考えています。
一つの画面に、3つのプランが並んでいてそれぞれモーダルが出てきて決済内容を入力するような仕様を想定しています。

しかし、この仕様だと一つ目のプランの場合のみカード入力画面が表示され、残りの2つのモーダルを出しても、入力画面が表示されずに困っています。

Java ScriptのID指定が問題だと思うのですが、指定を getElementById から getElementByClassName にしたり工夫はしているのですが、やはり表示されず・・・

ソースコード

app/views/payment/index.html.erb

Ruby
1<% @plan.each do |plan| %>
2  <div
3    class="modal fade"
4    id="payModal-<%= plan.id %>"
5    tabindex="-1"
6    role="dialog"
7    aria-labelledby="payModalLabel"
8    aria-hidden="true"
9  >
10    <div class="modal-dialog" role="document">
11      <div class="modal-content checkoutPlan">
12        <h2><%= plan.name %> を購読する</h2>
13        <div class="price">
14          <h4>$<%= plan.amount %>/mo</h4>
15          <p>月額費用</p>
16        </div>
17        <%= form_tag(subscriptions_path, method: 'post', id: 'payment-form') do %>
18          <div class="stripe">
19            <%= hidden_field_tag 'plan_id', plan.id %>
20            <form action="/charge" method="post">
21              <div class="form-row">
22                <label for="card-element">
23                  Enter your payment details security <i class="fas fa-lock"></i>
24                </label>
25                <div id="card-element">
26                  <!-- A Stripe Element will be inserted here. -->
27                </div>
28
29                <!-- Used to display form errors. -->
30                <div id="card-errors" role="alert"></div>
31              </div>
32
33              <button>決済する</button>
34            </form>
35          </div>
36        <% end %>
37      </div>
38    </div>
39  </div>
40<% end %>

app/assets/javascript/stripe.js

JavaScript
1// Create a Stripe client.
2var stripe = Stripe(gon.stripe_key);
3
4// Create an instance of Elements.
5var elements = stripe.elements();
6
7// Custom styling can be passed to options when creating an Element.
8// (Note that this demo uses a wider set of styles than the guide below.)
9var style = {
10  base: {
11    color: "#32325d",
12    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
13    fontSmoothing: "antialiased",
14    fontSize: "16px",
15    "::placeholder": {
16      color: "#aab7c4"
17    }
18  },
19  invalid: {
20    color: "#fa755a",
21    iconColor: "#fa755a"
22  }
23};
24
25// Create an instance of the card Element.
26var card = elements.create("card", { style: style });
27
28// Add an instance of the card Element into the `card-element` <div>.
29card.mount("#card-element");
30
31// Handle real-time validation errors from the card Element.
32card.addEventListener("change", function(event) {
33  var displayError = document.getElementById("card-errors");
34  if (event.error) {
35    displayError.textContent = event.error.message;
36  } else {
37    displayError.textContent = "";
38  }
39});
40
41// Handle form submission.
42var form = document.getElementById("payment-form");
43form.addEventListener("submit", function(event) {
44  event.preventDefault();
45
46  stripe.createToken(card).then(function(result) {
47    if (result.error) {
48      // Inform the user if there was an error.
49      var errorElement = document.getElementById("card-errors");
50      errorElement.textContent = result.error.message;
51    } else {
52      // Send the token to your server.
53      stripeTokenHandler(result.token);
54    }
55  });
56});
57
58// Submit the form with the token ID.
59function stripeTokenHandler(token) {
60  // Insert the token ID into the form so it gets submitted to the server
61  var form = document.getElementById("payment-form");
62  var hiddenInput = document.createElement("input");
63  hiddenInput.setAttribute("type", "hidden");
64  hiddenInput.setAttribute("name", "stripeToken");
65  hiddenInput.setAttribute("value", token.id);
66  form.appendChild(hiddenInput);
67
68  // Submit the form
69  form.submit();
70}