HTML Table Dynamic Row with Radio Buttons

<button id = "btn">add </button>
<table id = "tbl" border = "1" width = "100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Gender</th>
        </tr>
    </thead>
</table>

$(document).ready(function()
{
$('#btn').click(function()
{
var tbl = document.getElementById('tbl');
var rowsCount = tbl.rows.length;
var row = tbl.insertRow(rowsCount);
var cell1 = row.insertCell(0);
cell1.innerText = "Name";
var cell2 = row.insertCell(1);
var r1 = document.createElement('input');
r1.type = "radio";
r1.name = "gender" + rowsCount;
r1.id = "male" + rowsCount;
var lbl1 = document.createElement('label');
lbl1.innerText = "Male";
lbl1.htmlFor = r1.id;
cell2.appendChild(r1);
cell2.appendChild(lbl1);
var r2 = document.createElement('input');
r2.type = "radio";
r2.name = "gender" + rowsCount;
r2.id = "female" + rowsCount;
var lbl2 = document.createElement('label');
lbl2.innerText = "Female";
lbl2.htmlFor = r2.id;
cell2.appendChild(r2);
cell2.appendChild(lbl2);
});
});