Only one (the first) radio button in a group is selectable / active

Issue

I have a few groups of radio buttons being generated using data from a database. Currently I am only able to click on / successfully select the first of these groups of radio buttons, the others are unresponsive.

The code when I test it separately in jsfiddle works fine, so I don't think it is that, however here it is anyway

HTML generated/source:

<div class="radio">
  <div>
      <input type="radio" id="a" value="A" name="Q1" /> 
      <span class="inline">A</span>
  </div>
  <div>
      <input type="radio" id="b" value="B" name="Q1" /> 
      <span class="inline">B</span>
  </div>
  <div>
      <input type="radio" id="c" value="C" name="Q1" /> 
      <span class="inline">C</span>
  </div>
  <div>
      <input type="radio" id="d" value="D" name="Q1" /> 
      <span class="inline">D</span>
  </div>
  <div>
      <input type="radio" id="e" value="E" name="Q1" /> 
      <span class="inline">E</span>
  </div>
</div>

For what it is worth here is the PHP I am using to build the above:

$questions .='
<div class="radio">
';

foreach($values_data as $ke=>$va)
    {
    $questions.='
    <div><input  '.$tooltip.' type="radio" id="question_'.$i.'_'.$va['value'].'" value="'.$va['value'].'" name="question_'.$i.'" />
    <span class="inline">'.$va['value'].'</span></div>
    ';
    }

$questions .='
</div>
<div class="clear"></div>
';

echo $questions;

Where the above sits inside a loop that is defining $i and calling on databases to build arrays etc.

There are no errors in my console. Any ideas what this could be? Thanks

HERE is the portion of the actual source code generated. Also working in jsfiddle.

Solution

For the sake of closing this question:

This was a strange issue where by it seemed like the css properties were preventing proper element interaction: removing either float: right, or display: inline from the radio elements made them click able again.

I am not sure why this is, but I solved the issue by forcing the .radio class to have display: block; instead.

Answered By - Gideon