Почему кастомное радио не снимает галочку после нажатия другой радиокнопки?

Question

У меня есть две настраиваемые радиокнопки, при нажатии на них я отмечаю специальную галочку, чтобы отметить [галочка], но когда я нажимаю вторую кнопку, первая радиокнопка все еще проверяется.

здесь - jsfiddle: http://jsfiddle.net/03vwco7r/

вот HTML:

<p class="payment_module">
    <input id="session1" name="radio-group" type="radio" />
    <label for="session1">
      <img src="https://picsum.photos/86/49/?random" alt="Zapłać przelewem" width="86" height="49">
        Zapłać przelewem&nbsp;<span>(czas przetwarzania zamówienia będzie dłuższy)</span>
  </label>
</p>


    <p class="payment_module">
        <input id="session1" name="radio-group" type="radio" />
            <label for="session1">
                <img src="{$image|escape:'htmlall':'UTF-8'}" alt="{l s='Pay with PayU' mod='payu'}" />
            <a class="payu" href="{$actionUrl|escape:'htmlall':'UTF-8'}" title="{l s='Pay with PayU' mod='payu'}">
                {l s='Pay with PayU' mod='payu'}
            </a>
        </label>
    </p>

Вот CSS

input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  display: inline-block;
  cursor: pointer;
}
input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  position: relative;
  border: 1px solid #000;
  border-radius:50px;
  width: 60px;
  height: 60px;
  margin:0;
}
input[type="radio"]:checked + label:before {
  content: "✔";
  font-family: 'lucida grande';
  font-size: 45px;
  line-height: 60px;
  text-align: center;
}

Я хочу, чтобы когда пользователь нажимал вторую кнопку, первая кнопка автоматически отключалась,

Что я делаю не так в своем коде?

Answer 1

Поскольку они имеют одинаковые "id" и "for", вы должны изменить "id" и "for" во втором стиле радио:

<p class="payment_module">
    <input id="session1" name="radio-group" type="radio" />
    <label for="session1">
      <img src="https://picsum.photos/86/49/?random" alt="Zapłać przelewem" width="86" height="49">
        Zapłać przelewem&nbsp;<span>(czas przetwarzania zamówienia będzie dłuższy)</span>
  </label>
</p>


    <p class="payment_module">
        <input id="session2" name="radio-group" type="radio" />
            <label for="session2">
                <img src="{$image|escape:'htmlall':'UTF-8'}" alt="{l s='Pay with PayU' mod='payu'}" />
            <a class="payu" href="{$actionUrl|escape:'htmlall':'UTF-8'}" title="{l s='Pay with PayU' mod='payu'}">
                {l s='Pay with PayU' mod='payu'}
            </a>
        </label>
    </p>

session1 ===> session2