Dynamically added text=radio element is not bound to the existing group

Issue

I am trying to dynamically add new radio buttons within a table. The add process works OK but the newly added items are not bound to the original group. I am new to web coding so hope you can help with this maybe trivial problem. This is my (fake) html.

<table)
<tbody id="myList">
    <tr>
            <td>Ace</td>
        <td><input type="radio" name="radioCOL" id="1"></td>    
    </tr>
    <tr>
            <td>King</td>
        <td><input type="radio" name="radioCOL" id="2"></td>    
    </tr>
</tbody>
</table>

Now I want to dynamically add another element via js. eg

<tr>
    <td>Queen</td>
    <td><input type="radio" name="radioCOL" id="3"></td>    
</tr>

This is the jquery. (In the real code, the var's are not static)

<script> 
$(document).ready(function(){       
$('#btnAddItem').click(function() {
    var newItem = "Queen"
    var newID = 3;
    var newRadio = '<tr><td>'+newItem+'</td> <td><input type="radio" name="radioCol" id="'+newID+'"></td></tr>';
    $('#myList tr:first').before(newRadio); 
});
});
</script>

The new element is added correctly however it is not bound to the original group. There are now two "radioCol" groups, first the original (Ace,King) group, second a new group (Queen). Adding additional items are added to the newer (Queen) group.

Solution

Radio elements are grouped using name attribute

Your other elements have radioCOL, but your new element has radioCol which are not the same

Answered By - Konrad Linkowski