Accessibility: Keyboard navigation to dynamic header element from individual rows

Question

function onChange(e) {
  total += parseInt(e.target.value);
  headerCellButton.value = 'Submit: ' +  total;
}

function createHeaderRow(){
  headerRow = document.createElement("tr");
  headerCell = document.createElement("th");
  headerCell.textContent = 'Type';
  headerRow.appendChild(headerCell);
  headerCell1 = document.createElement("th");
  headerCellButton = document.createElement('input');
  headerCellButton.type = 'button';
  headerCell1.appendChild(headerCellButton);

  headerRow.appendChild(headerCell1);

  table.appendChild(headerRow);
}

function createRow(text){
  tr = document.createElement('tr');
  td = document.createElement('td');
  td.innerText = text;
  tr.appendChild(td);

  td = document.createElement('td');
  tr.appendChild(td);
  var input = document.createElement('input');
  input.addEventListener("input", onChange);
  input.type = 'text';
  td.appendChild(input);
  table.appendChild(tr);
}

const appDiv = document.getElementById('app');
var total = 0;
var headerCellButton;
var table = document.createElement('table'),
  tr,
  td,
  row,
  cell;

  createHeaderRow();
  createRow('Enter Amount to Buy Bannana');
  createRow('Enter Amount to Buy Cauli FLower');
  createRow('Enter Amount to Buy Beetroot');
  createRow('Enter Amount to Buy Carrot');
  createRow('Enter Amount to Buy Orange');
  createRow('Enter Amount to Buy Pomogranate');
  createRow('Enter Amount to Buy Potato');
  createRow('Enter Amount to Buy Tomato');

  table.border = '1px';
  appDiv.appendChild(table);

<div id="app"></div>

As seen in the app above and in the image attached, user need not enter all row values to click submit button. For a mouse user, this is okay.

But a keyboard user needs to tab many times to go to submit. Ideally, After typing a value, in the next tab key press, it should go to submit button. But, we don't know if user wants to enter more values and then go to submit button.