jquery ui creates a lot of undesirable spans - php

Question

I've a form using jquery ui ,
I must do a radio choice wich takes the values from DB so i tried this :
//function wich reutrn applicable ratio for the pricing
function getAvailableCoeff(){
echo "<td>Coeff : </td>";
echo "<td><div class='radio'>";
$req = "SELECT coef,id_type FROM type_client WHERE valide =1 GROUP BY coef";
$res = mysql_query($req);
while($row=mysql_fetch_array($res)){
$id = 'coeff'.$row['id_type'];
$value = $row['coef'];
$input = "<label for='$id'>$value</label>";
$input .= "<input type='radio'id='$id' name='coeff' value='$value'/>";
echo $input;
}
echo "</div></td>";
}
Nothing very difficult no ? But when i sent it to integration server i saw enormous radio buttons ( they are 3 atm)!
i let you check it here
(on the screen the "1","2","3","4","quadri","5","6" radios buttons are hardcoded with this syntax : <input type="radio" id="spT_radio-coul-1" value="1" name="nbCoul" /> <label for="spT_radio-coul-1">1</label>
Moreover the radio buttondon't pass in the form sumbission , $_POST['coef'] is still empty..
So i take a look to the html and .. WTF ?
Each radio button get this kind of code :
<label for="coeff5" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">0.66</span></span></span></span></span></span></label>
So jquery auto generates all theses spans but how to remove them in order to get normals radio buttons ?
Have anyone encountered thsi kind of problems with jquery ui ?
TEMPORARY (ugly) SOLUTION :
.ui-button-text-only .ui-button-text {
padding:2px;
!important;
}
FINAL SOLUTION (Thx SuperScript) :
//function wich reutrn applicable ratio for the pricing
function getAvailableCoeff($form){
echo "<td>Coeff : </td>";
echo "<td><div class='radio'>";
$req = "SELECT coef,id_type FROM type_client WHERE valide =1 GROUP BY coef";
$res = mysql_query($req);
while($row=mysql_fetch_array($res)){
$id = $form.'coeff'.$row['id_type'].$i;
$value = $row['coef'];
$input = "<label for='$id'>$value</label>";
$input .= "<input type='radio' id='$id' name='coeff' value='$value'/>";
echo $input;
$i++;
}
echo "</div></td>";
}
I pass a string value for each call , like that the id's are really unique !

Answer 1

Solved! The problem is using duplicate ids.
On the page, all of your <input> use the same sets of ids (#coeff5,#coeff2,#coeff1). jQuery UI uses those ids to add the spans, so the duplicates are wrecking it.
ids must be unique.
I made some test cases for this:
Not working: http://jsfiddle.net/PGcL4
Working JSFiddle.
So, you would change your PHP code to:
//function wich reutrn applicable ratio for the pricing
function getAvailableCoeff(){
echo "<td>Coeff : </td>";
echo "<td><div class='radio'>";
$req = "SELECT coef,id_type FROM type_client WHERE valide =1 GROUP BY coef";
$res = mysql_query($req);
$i=0;
while($row=mysql_fetch_array($res)){
$id = 'coeff'.$row['id_type'].$i;
$value = $row['coef'];
$input = "<label for='$id'>$value</label>";
$input .= "<input type='radio' id='$id' name='coeff' value='$value'/>";
echo $input;
$i++;
}
echo "</div></td>";
}
That makes all of the ids unique like required.