radio buttons in list don't group - forms

Question

I've got a pretty nasty problem here!
I have an <ul> with a group of input in every <li>. In every list element there is a radio button and I want to group them together to make them toggle when clicked.
The problem is that the radios don't connect! if I click two of them they get both checked!
Here's the code: http://jsfiddle.net/bakaburg1/Djq5q/1/
To notice: this is the code for a wordpress custom field.
Many Thanks!
EDIT1:
it's important that the fields in every list element remain connected so that on the PHP side i got a data structure as such:
array (
0 =>
array (
'answer' => 'answer1',
),
1 =>
array (
'answer' => 'answer2',
),
2 =>
array (
'is_right' => 'on',
'answer' => 'answer3',
),
3 =>
array (
'answer' => 'yiuyiuyiuj',
),
)
EDIT2:
for the time being I patched the issue with some jQuery:
jQuery('.mm_ps_answers input:radio').click(function(){
jQuery(this).parents('ul').find('input:radio').not(this).attr('checked', false)
})
Not sure the most elegant solution though, feel free to comment (not answer) on this snippet too!
EDIT3:
I solved the problem by giving three different names to the fields, and then merging the POSTed data in one array to be then serialized and saved in the database.
<li>
<a class="mm_ps_move button"><img src="http://localhost:8888/minimamedicamenta/wp-content/themes/minima/img/move.png"></a>
<a class="mm_ps_delete_answer button">Delete Answer</a>
<input type="radio" class="mm_ps_is_right" name="mm_ps_answers_is_right[]">
<input type="text" name="mm_ps_answers_input[]" value="">
<input type="hidden" name="mm_ps_answers_impressions[]">
<span class="mm_ps_impressions">impressions: <span>0</span></span>
</li>
Another problem poped up though... while the POSTed data in the back end for the text input fields is a well ordered array with a value for every field, also the empty ones, the radiobutton send only one value, so i have no idea of wich radio in wich list element has been checked, any help on this? Here's is the data in the POST for the three inputs (values are random strings):
[04-Aug-2012 17:18:45] Line (in ):
array (
0 => 'cvxcv',
1 => 'vs',
2 => '',
3 => 's',
)
[04-Aug-2012 17:18:45] Line (in ):
array (
0 => 'on',
)
[04-Aug-2012 17:18:45] Line (in ):
array (
0 => '',
1 => '',
2 => '',
3 => '',
)
EDIT4:
I patched the issues with a javascript that assign an incremental numerical value to the radio buttons on every action that modify the list (sorting, adding, deleting elements). Not very clean although.

Answer 1

<ul class="mm_ps_answers manage_list ui-sortable">
<li>
<input type="radio" name="SameName">
<input type="text" name="mm_ps_answers[0][answer]" value="jkjhk">
<span class="mm_ps_impressions">impressions: </span>
</li>
<li>
<input type="radio" name="SameName">
<input type="text" name="mm_ps_answers[1][answer]" value="lknjlk">
<span class="mm_ps_impressions">impressions: </span>
</li>
<li>
<input type="radio" name="SameName">
<input type="text" name="mm_ps_answers[2][answer]" value="òklkjl">
<span class="mm_ps_impressions">impressions: </span>
</li>
<li>
<input type="radio" name="SameName">
<input type="text" name="mm_ps_answers[3][answer]" value="p09i0i">
<span class="mm_ps_impressions">impressions: </span>
</li>
The property that makes a browser to toggle them is the NAME of the RadioButton. Name all those radio buttons the same(each group should have same name) and they will toggle.

Answer 2

If it's not possible for to use the name attribute for one reason or another (for example your name attribute is populated dynamically - which I suspect it is), you could use jQuery to toggle the checkboxes:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('input[type="radio"]').prop('checked', false);
$(this).prop('checked', true);
});
});

Answer 3

To group radio buttons together you must specify the same value in the name attribute.
ex. (from W3Schools)
<form action="">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
Edit:
To keep the order you were planning in the jsFiddle link you provided I would recommend you make an iterative statement on one list item :
(sorry for incorrect php code but i haven't used it in a long time)
foreach($answer as $value){
<li>
<input type="radio" name="answer" value="$value[is_right]">
<input type="text" name="$value[answer]" value="jkjhk">
<span class="mm_ps_impressions">impressions: </span>
</li>
}