How to display radio and checkbox values in table using javascript?

form.html

<div class="container">
  <br>
<br>
  <h3 class="text-center">Display answers of form fill in inside a table</h3>
  <br>
<br>
  <form>
  <div class="form-group">
    <label>First Name</label>
    <input id="name" class="form-control form-control-sm" />
  </div>

<div class="form-group">
    <label>Age</label>
    <input id="age" class="form-control form-control-sm" />
  </div>
   
   <div class="form-group">
    Gender:<input type="radio" name="male" id="gender" value="male">Male
       
        <input type="radio" name="female" id="gender" value="female">
        <label for="female">Female</label>
  </div>
    
 <div class="form-group">
<label>Language</label>
  <input type="checkbox" id="language" name="malayalam" value="Malayalam">Malayalam
        <input type="checkbox" id="language" name="english" value="English">English
        <input type="checkbox" id="language" name="hindi" value="Hindi">Hindi
 </div>
  <button type="button" id ="display" class="btn btn-sm btn-primary">Display</button>
</form>


<br>
  <br>
<table  class="table border" id= "table" >
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Language</th>
</tr>
</table>

<script type="text/javascript" src="form.js"></script>
</div>

form.js****

(function setup() {
“use strict”;

var NameElem = document.getElementById("name");
var genderElem = document.getElementById("gender");
var ageElem = document.getElementById("age");
var languageElem = document.getElementById("language");
var tableElem = document.getElementById("table");
document.getElementById("display").addEventListener("click", function () {
    var newRow = tableElem.insertRow(-1);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode(NameElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(1);
    newText  = document.createTextNode(genderElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(2);
    newText  = document.createTextNode(ageElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(3);
    newText  = document.createTextNode(languageElem.value);
    [newCell.appendChild][1](newText);
    NameElem.value = "";
    genderElem.value = "";
    ageElem.value = "";
    languageElem.value = "";
    tableElem.value = "";
});

})();

When i click display button it displays name and age but gender and checkbox is incorrect it displays first value only. I want to display which i select.
radio data and checkbox data should display
I have given image also please check