How to pass the value or id of a checkbox to a table if it's checked on button click

Question

I want var u to put all of the values or ids that are checked from my Units oriented to label, onto my table as text when I click the add button.
And just for an added bonus, for some reason, my working hours label is at the end of my check boxes. How do I put it on a new line?
I have display: block at the very top of my code.

 function insert_Row() { var x = document.getElementById('therapists').insertRow(1); for (let i = 0; i < 5; i++) x.insertCell(i).innerHTML = ''; var w = document.getElementById('therapists').rows[parseInt(1, 10)].cells; w[parseInt(0.10)].innerHTML = "<input type='checkbox'>"; var v = document.getElementById('therapists').rows[parseInt(1, 10)].cells; v[parseInt(1, 10)].innerHTML = document.getElementById("tname").value; var u = document.getElementById('therapists').rows[parseInt(1, 10)].cells; u[parseInt(2, 10)].innerHTML = document.getElementById('unitot').value.is(':checked'); var t = document.getElementById('therapists').rows[parseInt(1, 10)].cells; t[parseInt(3, 10)].innerHTML = document.getElementById('hours').value; var s = document.getElementById('therapists').rows[parseInt(1, 10)].cells; s[parseInt(4, 10)].innerHTML = "<button onclick='this.closest(\"tr\").remove()'>Remove</button>"; }

 input[type=text], select { width: 30%; padding: 12px 20px; margin: 8px 0; display: block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=button] { width: 30%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=button]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; }.topnav { overflow: hidden; background-color: #333; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.topnav a:hover { background-color: #ddd; color: black; }.topnav a.active { background-color: #4CAF50; color: white; } #therapists { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 30%; } #therapists td, #therapists th { border: 1px solid #ddd; padding: 8px; } #therapists tr:nth-child(even) { background-color: #f2f2f2; } #therapists tr:hover { background-color: #ddd; } #therapists th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white; }

 <div class="topnav"> <a href="#">Schedule</a> <a href="#">Patients</a> <a class="active" href="#therapistinfo">Therapists</a> </div> <h3>Therapists</h3> <table id="therapists"> <tr> <th>Working?</th> <th>Therapists</th> <th>Unit's Oriented To</th> <th>Working Hours</th> <th> </th> </tr> </table> <div> </div> <div> <form action="/action_page.php"> <label for="tname">Therapist's Name</label> <input type="text" id="tname" name="therapistname" placeholder="Therapists's Name.."> <label for="unitot">Units Oriented To:</label> 64 <input type="checkbox" id="64" value="64"> 66 <input type="checkbox" id="66" value="66"> 68 <input type="checkbox" id="68" value="68"> 76 <input type="checkbox" id="76" value="76"> ARU <input type="checkbox" id="aru" value="aru"> <label for="hours">Working Hours</label> <select id="hours" name="hours"> <option value="8hrs">8hrs</option> <option value="10hrs">10hrs</option> <option value="12hrs">12hrs</option> </select> <input type="button" value="Add" onclick="insert_Row()"> </form> </div>

Answer 1

You have multiples inputs elements, so you can get the element by adding a class (.unitot) and then use the function slice.call with querySelector to get there:

HTML:

<div class="topnav">
  <a href="#">Schedule</a>
  <a href="#">Patients</a>
  <a class="active" href="#therapistinfo">Therapists</a>
</div>
<h3>Therapists</h3>
<table id="therapists">
  <tr>
    <th>Working?</th>
    <th>Therapists</th>
    <th>Unit's Oriented To</th>
    <th>Working Hours</th>
    <th> </th>
  </tr>
</table>
<div>
</div>
<div>
  <form action="/action_page.php">
    <label for="tname">Therapist's Name</label>
    <input type="text" id="tname" name="therapistname" placeholder="Therapists's Name..">
    <label for="unitot">Units Oriented To:</label> 64
    <input class="unitot" type="checkbox" id="64" value="64"> 66
    <input class="unitot" type="checkbox" id="66" value="66"> 68
    <input class="unitot" type="checkbox" id="68" value="68"> 76
    <input class="unitot" type="checkbox" id="76" value="76"> ARU
    <input class="unitot" type="checkbox" id="aru" value="aru">
    <label for="hours">Working Hours</label>
    <select id="hours" name="hours">
      <option value="8hrs">8hrs</option>
      <option value="10hrs">10hrs</option>
      <option value="12hrs">12hrs</option>
    </select>
    <input type="button" value="Add" onclick="insert_Row()">
  </form>
</div>

JavaScript:

function insert_Row() {
  var x = document.getElementById('therapists').insertRow(1);
  for (let i = 0; i < 5; i++) x.insertCell(i).innerHTML = '';
  var w = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  w[parseInt(0.10)].innerHTML = "<input type='checkbox'>";
  var v = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  v[parseInt(1, 10)].innerHTML = document.getElementById("tname").value;
  var u = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  var unitots = [].slice.call(document.querySelectorAll('.unitot:checked'));
  var unitotsValues = "";
  for ( var i = 0; i < unitots.length; i++ ) {
    if (i >= 1) { unitotsValues += ", " + unitots[i].id; }
    else { unitotsValues = unitots[i].id; }
  } 
   u[parseInt(2, 10)].innerHTML = unitotsValues;
    var t = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  t[parseInt(3, 10)].innerHTML = document.getElementById('hours').value;
  var s = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  s[parseInt(4, 10)].innerHTML = "<button onclick='this.closest(\"tr\").remove()'>Remove</button>";
}