Mounting Stripe Elements, in foreach modal(s)

Hi all,

I have a foreach loop showing a list of "bills" and each one can have a Pay by Card link, which opens the Bootstrap modal window.

I need to show the Stripe Elements card div but it needs to relate to the current opened modal. I guess I can hook into the modal event, but I'm not sure how to, or what should I wrote to make this work. Can any of you wonderful people help me out?

This is the modal inside the foreach loop:

<!-- Modal -->
                            <div class="modal fade" id="item_{{$item->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Pay Bill</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="bg-light p-3">
                                            
                                            <h4>Total (inc fees) {{ currency(card_fee($item->amount_outstanding)) }}</h4>
                                        </div>
                                        <div class="form-group">
                                            <label>Cardholder Name</label>
                                            <input id="card-holder-name" class="form-control" type="text">

                                            <!-- Stripe Elements Placeholder -->
                                            <div id="card-element"></div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        <button id="card-button" data-secret="{{ $intent->client_secret }}" class="btn btn-success">Pay Now</button>
                                    </div>
                                </div>
                            </div>
                            </div>

Then I have this JS, which does render in the first modal, but doesn't show in the other modals if there's more than one in the foreach loop.

<script>
    const stripe = Stripe('pk_test_xxxxxxxxxxxxxxx');
    const elements = stripe.elements();
    const cardElement = elements.create('card');

    cardElement.mount("#card-element");
</script>