动态列表中的样式单选按钮

I would like to use radio buttons, styled to look like normal buttons, within cards that are dynamically generated within a loop.

For example:

<?php
  for ($i = 1; $i <= $max; $i++) {
    echo '<div class="card">';
    echo '<div class="btn-group" data-toggle="buttons">';
    echo '<label class="btn btn-success btn-rounded">';
    echo '<input type="radio" name="option" id="' . $i . '" />Select';
    echo '</label>';
    echo '</div>';
    echo '</div>';
  }
?>

I'd hoped this would mean only one radio button could be selected but it's not the case. I tried moving the btn-group outside the loop like this:

<div class="btn-group" data-toggle="buttons">
<?php
  for ($i = 1; $i <= $max; $i++) {
    echo '<div class="card">';
    echo '<label class="btn btn-success btn-rounded">';
    echo '<input type="radio" name="option" id="' . $i . '" />Select';
    echo '</label>';
    echo '</div>';
  }
?>
</div>

but that didn't have the right result, as it exposed the actual radio button which is supposed to look like a normal button, and also broke all the styling of the cards.

Is there something obvious that I've missed?