Dodavanje nove kupovine u kalkulatoru proizvoda

Za početak, hajde da učinimo da se klikom na dugme u tabelu doda novi red sa kupovinom:

javascriptadd.addEventListener('click', function() {
  let tr = document.createElement('tr');
  
  let td;
  
  td = document.createElement('td');
  td.textContent = name.value;
  td.classList.add('name');
  tr.appendChild(td);
  
  td = document.createElement('td');
  td.textContent = price.value;
  td.classList.add('price');
  tr.appendChild(td);
  
  td = document.createElement('td');
  td.textContent = amount.value;
  td.classList.add('amount');
  tr.appendChild(td);
  
  td = document.createElement('td');
  td.textContent = price.value * amount.value;
  td.classList.add('cost');
  tr.appendChild(td);
  
  td = document.createElement('td');
  td.textContent = 'obriši';
  td.classList.add('remove');
  tr.appendChild(td);
  
  table.appendChild(tr);
});

Međutim, moje predloženo rešenje ima očigledne probleme sa dupliranjem koda: zapravo za svaku ćeliju pišemo isti kod.

Bilo bi prikladno imati neku funkciju za kreiranje ćelije tabele. Neka ova funkcija kao prvi parametar prima referencu na red tabele, kao drugi parametar - tekst ćelije tabele, a kao treći - ime CSS klase ćelije:

javascriptfunction createCell(tr, value, name) {
  
}

Imajući ovakvu funkciju mogli bismo da prepišemo gore navedeni kod na sledeći način:

javascriptadd.addEventListener('click', function() {
  let tr = document.createElement('tr');
  
  createCell(tr, name.value, 'name');
  createCell(tr, price.value, 'price');
  createCell(tr, amount.value, 'amount');
  createCell(tr, price.value * amount.value, 'cost');
  createCell(tr, 'obriši', 'remove');
  
  table.appendChild(tr);
});