radio buttons in list don't group

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.