Как добавить данные из формы в новую строку таблицы с помощью JQuery?

К полям "Фамилия, имя, отчество, год рождения" добавить ID, а при нажатии кнопки "добавить", записывать значения этих полей в таблицу, которая тоже должна иметь идентификатор полей.

HTML

<input id="surname" type="text" name="surname"/>
<input id="firstName" type="text" name="firstName"/>
<input id="secondName" type="text" name="secondName"/>
<input id="year" type="text" name="year"/>

<input type="submit" value="Добавить" onclick="add()"/>

javascript

<script>
function add() {
document.getElementById("id-table").value = document.getElementById("year").textContent;
// тут перечислить все поля
</script>
}

Если писать на чистом jQuery, то запись будет выглядеть как-то так :)

$('#id-table').text('#id-year');   

Если вы таким образом планируете добавлять информацию в базу данных, то нужно создать переменные для каждого поля, а при отправки запроса перечислить их

data    : {surname: name, year: year} // и так далее...

Ajax-запрос к серверу через jQuery

Сначала необходимо из формы записать данные в массив? Или нужно прямо в таблице создать форму? или можно как-то передать данные из формы сразу в таблицу?

Всяко можно это все организовать...

Вот вариант с записью сразу в таблицу.

const af = ['surname', 'firstName', 'secondName' ,'year']
const of = document.querySelector('form')
const ot = document.querySelector('#data')
const or = document.createElement('tr')
af.forEach(v => {
  const o = document.createElement('th')
  o.textContent = v
  or.insertAdjacentElement('beforeend', o)
})
ot.querySelector('thead').insertAdjacentElement('beforeend', or)
of.addEventListener('submit', e => {
  e.preventDefault()
  const or = document.createElement('tr')
  af.forEach(v => {
    const o = document.createElement('td')
    const ov = of.querySelector('#' + v)
    o.textContent = ov.value
    ov.value = ''
    or.insertAdjacentElement('beforeend', o)
  })
  ot.querySelector('tbody').insertAdjacentElement('beforeend', or)
})

<form>
  <input id="surname" type="text" name="surname" />
  <input id="firstName" type="text" name="firstName" />
  <input id="secondName" type="text" name="secondName" />
  <input id="year" type="text" name="year" />
  <button>Добавить</button>
</form>
<table id='data' border='1'>
  <thead></thead>
  <tbody></tbody>
</table>