Использовать элемент выбора без выпадающего списка

В настоящее время у меня есть страница с ценами на моем веб-сайте, которая использует html-элементы <select> и <option>, чтобы пользователи могли выбрать тарифный план.

Это код для раскрывающегося списка выбора плана:

<select name="plan" class="form-control" id="subscription-plan">
    @foreach ($plans as $key => $plan)
        <option value="{{ $key }}">{{ $plan }}</option>
    @endforeach
</select>

А вот как выглядит форма:

Я хотел бы добавить 2 карты, содержащие информацию о плане, которую пользователь может выбрать и действовать так же, как раскрывающийся список, за исключением того, что он не является раскрывающимся. id="subscription-plan" важен, потому что он отправляет соответствующий план, выбранный пользователем, в Stripe API, который выставляет счет кредитной карте пользователя на сумму, установленную в Stripe. Кто-нибудь знает, как я мог этого добиться?

Я хотел бы сделать что-то вроде этого (но без выпадающего стиля):

<select name="plan" class="form-control" id="subscription-plan">
                @foreach ($plans as $key => $plan)
                    <option value="{{ $key }}">
                        <div class="card mb-5 mb-lg-0">
                            <div class="card-body">
                                <h5 class="card-title text-muted text-uppercase text-center">Monthly</h5>
                                <h6 class="card-price text-center">$8.44<span class="period">/month</span></h6>
                            </div>
                        </div>
                    </option>
                @endforeach
            </select>

ОБНОВЛЕНИЕ: я пробовал это:

@foreach ($plans as $key => $plan)
        <div class="col-6">
            <label>
                <input type="radio" name="plan" value="{{ $key }}" class="card-input-element" id="subscription-plan">

                <div class="panel panel-default card-input">
                    <div class="panel-heading">{{ $plan }}</div>
                    <div class="panel-body">2 Memorials</div>
                </div>
            </label>
        </div>
    @endforeach

Этот код работает и дает мне желаемый эффект наличия выбираемых карт, но API Stripe теперь получает только «ежемесячный» план, даже если пользователь отправляет данные своей кредитной карты после выбора «годового» плана. Это потому, что теперь оба входа имеют id="subscription-plan".

Полоса JavaScript:

        const stripe = Stripe('{{ env('STRIPE_KEY') }}');
        const elements = stripe.elements();
        const cardElement = elements.create('card');
        cardElement.mount('#card-element');
        const cardHolderName = document.getElementById('card-holder-name');
        const cardButton = document.getElementById('card-button');
        const clientSecret = cardButton.dataset.secret;
        const plan = document.getElementById('subscription-plan').value;

        cardButton.addEventListener('click', async (e) => {
            const { setupIntent, error } = await stripe.handleCardSetup(
                clientSecret, cardElement, {
                    payment_method_data: {
                        billing_details: { name: cardHolderName.value }
                    }
                }
            );
            if (error) {
                // Display "error.message" to the user...
            } else {
                // The card has been verified successfully...
                console.log('handling success', setupIntent.payment_method);

                axios.post('subscribe',{
                    payment_method: setupIntent.payment_method,
                    plan : plan
                }).then((data)=>{
                    location.replace(data.data.success_url)
                });
            }
        });

ОБНОВЛЕНИЕ 2: я заменил const plan = document.getElementById('subscription-plan').value; на var plan = document.querySelector('input[name="plan"]:checked').value;. Теперь я получаю Uncaught TypeError: Cannot read property 'value' of null в консоли, когда пытаюсь отправить.