I am using a tutorial which is teaching me how to make custom radio buttons. My problem is that when I made 3 radio buttons, only first one is working. It is not possible to click on another two. When I click another one, only the first button is working.

HTML:

```
    <label for="myRadioId" class="radio">
      <input type="radio" name="myRadioField" id="myRadioId" class="radio__input">
      <div class="radio__radio"></div>
      option 1
    </label><br>
    <label for="myRadioId" class="radio">
      <input type="radio" name="myRadioField" id="myRadioId" class="radio__input">
      <div class="radio__radio"></div>
    option 2
    </label><br>
    <label for="myRadioId" class="radio">
      <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" disabled>
      <div class="radio__radio"></div>
     disabled
    </label>

```

CSS:

```css
    .radio {
      cursor: pointer;
      display: inline-flex;
    }

    .radio__input {
      display: none;
    }

    .radio__radio {
      width: 1.25rem;
      height: 1.25rem;
      border: 2px solid #d8e4e2;
      border-radius: 50%;
      margin-right: 10px;
      box-sizing: border-box;
      padding: 2px;
    }

    .radio__radio::after {
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      background: #009879;
      border-radius: 50%;
      transform: scale(0);
      transition: transform 0.15s;
    }

    .radio__input:checked + .radio__radio::after {
      transform: scale(1);
    }

```

[![Here is how it looks like, only top radio button works](https://i.stack.imgur.com/QufeT.png)](https://i.stack.imgur.com/QufeT.png)

Does anybody have any idea for what to do to make the radio buttons start working?