Неудобное поведение - при нажатии на ярлык второй кнопки-переключателя она не активируется, а первая -

Question

Код ниже ( здесь jsFiddle) демонстрирует довольно странное поведение...

<div style="white-space:nowrap;">
  <input type="radio" id="one" name="click_item" value="1" />
  <label for="one">First Item</label>
  <input type="radio" id="one" name="click_item" value="2" />
  <label for="two">Second Item</label>
</div>

... нажатие на метку "Первый элемент" проверяет / снимает флажок с первой радиокнопки, но нажатие на метку "Второй элемент" ничего не дает!

Я уверен, что решение тривиально, но я просто не могу увидеть, что мне не хватает!

Answer 1

id Должно быть уникальным; у вас одинаковые идентификаторы. Исправьте это:

<input type="radio" id="two" name="click_item" value="2" />

Answer 2

Вы должны иметь уникальные имена id, вы используете один и тот же идентификатор для обоих элементов, поэтому вам нужно объявить другой идентификатор для другого элемента, поэтому он должен быть

<input type="radio" id="two" name="click_item" value="2" />