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

November 16, 2022

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.