Dynamic radio button values change by clicking another radio button - php

Question

I have same div multiple times.If I click on 'Mr' radio button in first div field should change last div radio button value as 'male' Here my code.It is changing all div values as 'male'.How do I change related form Gender radio button value when clicking the title radio button.Please anybody help me.
<?php
for($i=1;$i<=$totalchilds;$i++){
?>
<div class="primary Applicant-details">
<h3>Tourist Details </h3>
<div>
<label>Title : </label>
<input type="radio" class="gender" name="c_genderinfo_<?=$i?>" value="Mr" checked>
Mr
<input type="radio" class="gender1" name="c_genderinfo_<?=$i?>" value="Mrs">
Mrs </div>
<div>
<label for="fname">Name</label>
<input type="text" name="c_name_<?= $i ?>" placeholder="child name">
</div>
<div>
<label for="lname">Age</label>
<input type="text" name="c_age_<?=$i?>" placeholder="Enter child age">
</div>
<div>
<label>Gender : </label>
<input type="radio" class="gender" name="c_gender_<?=$i?>" value="M" checked>
Male
<input type="radio" class="gender1" name="c_gender_<?=$i?>" value="F">
Female </div>
</div>
<?php }?>

Answer 1

To change the gender radio button in the same div use this code:
$('.gender').click(function(){
$(this).closest('.Applicant-details').find('.gender').prop('checked',true);
});
$('.gender1').click(function(){
$(this).closest('.Applicant-details').find('.gender1').prop('checked',true);
});
The structure of the code isn't very optimal. Rename the title from gender to title. Naming the radio buttons gender and gender1 isn't any better. Besides, from a usability perspective, having both selections that have the same value doesn't make a lot of sense.

Answer 2

You can use jQuery. There are different methods to achieve this. This is one of them.
Pass your id and value from html like this:
<div>
<label>Title : </label>
<input onclick="changeGender(<?=$i?>, 'M')" type="radio" class="gender" name="c_genderinfo_<?=$i?>" value="Mr" checked>
Mr
<input onclick="changeGender(<?=$i?>, 'F')" type="radio" class="gender1" name="c_genderinfo_<?=$i?>" value="Mrs">
Mrs
</div>
And in script:
function changeGender(id, value)
{
$("input[name=c_gender_"+id+"][value=" + value + "]").prop('checked', true);
}