Radio button text click result wrong answer [duplicate] - html

Question

This question already has an answer here:
2 sets of radio buttons with same IDs
(1 answer)
Closed 10 months ago.
When I click the text of "prefer not to say" of the second and third questions, the first question's answer changes to "prefer not to say". When I click the text of 'other' of the third question, the second question's answer changes to 'other'. In both cases, the third question's 'other' and 'prefer not to say' do not check when I click text. What is wrong with this code?
It runs well when I click the radio button.
<div>
<p><strong>1. What is your age?</strong></p>
<input type="radio" id="Under18" name="h11" value="Under18">
<label for="Under18">Under 18</label><br>
<input type="radio" id="18-25" name="h11" value="18-25">
<label for="18-25">18 - 25</label><br>
<input type="radio" id="26-35" name="h11" value="26-35">
<label for="26-35">26 - 35</label><br>
<input type="radio" id="46-55" name="h11" value="46-55">
<label for="46-55">46 - 55</label><br>
<input type="radio" id="Over55" name="h11" value="Over55">
<label for="Over55">Over 55</label><br>
<input type="radio" id="Prefer not to say" name="h11" value="Prefer not to say">
<label for="Prefer not to say">Prefer not to say</label>
</div>
<div>
<p><strong>2. What is your gender?</strong></p>
<input type="radio" id="Female" name="h12" value="Female">
<label for="Female">Female</label><br>
<input type="radio" id="Male" name="h12" value="Male">
<label for="Male">Male</label><br>
<input type="radio" id="Other" name="h12" value="Other">
<label for="Other">Other</label><br>
<input type="radio" id="Prefer not to say" name="h12" value="Prefer not to say">
<label for="Prefer not to say">Prefer not to say</label>
</div>
<div>
<p><strong>3. What is your ethnicity?</strong></p>
<input type="radio" id="White/Caucasian" name="h13" value="White/Caucasian">
<label for="White/Caucasian">White/Caucasian</label><br>
<input type="radio" id="Hispanic/Latino" name="h13" value="Hispanic/Latino">
<label for="Hispanic/Latino">Hispanic/Latino</label><br>
<input type="radio" id="Black/African American" name="h13" value="Black/African American">
<label for="Black/African American">Black/African American</label><br>
<input type="radio" id="Asian/Pacific Islander" name="h13" value="Asian/Pacific Islander">
<label for="Asian/Pacific Islander">Asian/Pacific Islander</label><br>
<input type="radio" id="Native American/American Indian" name="h13" value="Native American/American Indian">
<label for="Native American/American Indian">Native American/American Indian</label><br>
<input type="radio" id="Other" name="h13" value="Other">
<label for="Other">Other</label><br>
<input type="radio" id="Prefer not to say" name="h13" value="Prefer not to say">
<label for="Prefer not to say">Prefer not to say</label>
</div>

Answer 1

This is because your radio inputs have the same ID.
Every element needs to have unique ID, so just change some of them and you should be fine. Don't forget to update your for attributes aswell.

Answer 2

IDs are global in the DOM.
Your label is targeting the control with the id "Prefer not to say", so the first control with the ID that matches the for attribute in the label is activated.
Add a 1, 2, 3, etc... to the ids and for attri