Как реализовать добавление полей в форму с названием, для дальнейшего вывода в таблицу?

Есть код который добавляет введённые данные в таблицу, но надо чтоб пользователь мог добавлять и свои поля с названиями, а они успешно все вместе добавлялись бы в таблицу.

<form id="zd">
  <label>Калории получил: <input name="call+" id="call+" value=""></label>
  <label>Потратил калории: <input name="call-" id="call-" value=""></label>
  <label>Количество тренировок: <input name="treni" id="treni" value=""></label>
  <input type="submit" value="Считать">
</form>

<table>
  <thead>
    <tr>
      <th>Калории получил</th>
      <th>Потратил калории</th>
      <th>Количество тренировок</th>
     
    </tr>
  </thead>
  <tbody id="dest">
  </tbody>
</table>

document.getElementById('zd').addEventListener('submit', function (event) {
 event.preventDefault();
 
 var tr = document.createElement("tr");
 var cols = ['call+', 'call-', 'treni'];
 
 for (var q=0; q<cols.length; ++q) {
   var td = document.createElement("td");
   td.textContent = document.getElementById(cols[q]).value;
   tr.appendChild(td);
 }
 document.getElementById('dest').appendChild(tr);
});