如何自动计算（第一次输入）和（第二次输入）等......并在计算过程之后对 JavaScript 中的所有输入求和

享受。

<div id="example_container">
  <label>
    <span>Enter the total number of cargo spaces:</span>
    <input class="total_spaces" type="number">
  </label>
  <button class="total_spaces">OK</button>
  
  <div class="all_fields hide">
    <div class="cargo_row_template flex">
      <span class="row_number"></span>
      <span class="txt">Length</span>
      <input class="length" type="number">
      <span class="txt">Height</span>
      <input class="height" type="number">
      <span class="txt">Width</span>
      <input class="width" type="number">
      <span class="txt no-wrap">Total Boxes:</span>
      <input class="total_boxes" type="number">
    </div>  
  </div>
  
  <div class="flex">
    <button class="calculate">Calculate</button>
  </div>
  
</div>

// wait for dom to be built before running this javascript
document.addEventListener('DOMContentLoaded', () => {
    
  const updateCalculations = () => {
    const all_cargo_rows = document.querySelectorAll('.cargo_row_template');
    const totals = [...all_cargo_rows].map(($cargo_row) => {
        // get numerical value of each field (if blank then use 0)
        const length = Number($cargo_row.querySelector("input.length").value) || 0;
      const height = Number($cargo_row.querySelector("input.height").value) || 0;
        const width = Number($cargo_row.querySelector("input.width").value) || 0;
      const total_boxes = Number($cargo_row.querySelector("input.total_boxes").value) || 0;
      console.log(length, height, width, total_boxes);

            return (length*width*height)/6000;
    });
    console.log(totals);
  }

  const createFields = (num_of_fields) => {
    const $cargo_row_template = document.querySelector('.cargo_row_template');
    const $all_fields = document.querySelector('.all_fields');
    
    // clear out all rows (if any)
    emptyDiv($all_fields);
    
    // create a clone for each cargo space needed to be built.
    const new_fields = Array.from({length: num_of_fields}, (_, i) => {
        // clones row
      const $clone = $cargo_row_template.cloneNode(true);
      $clone.querySelector('.row_number').textContent = `${i+1}.`;
      return $clone;
    });
    $cargo_row_template.remove();
    $all_fields.append(...new_fields);
    $all_fields.classList.remove('hide');
  }

    const initEventListeners = () => {
    const $total_spaces_btn = document.querySelector('button.total_spaces');
    $total_spaces_btn.addEventListener('click', () => {
      const $total_spaces = document.querySelector('input.total_spaces');
      createFields($total_spaces.value);
    });
    const $calculate = document.querySelector("button.calculate");
    $calculate.addEventListener('click', () => {
        updateCalculations();
    })
  }
  
  const emptyDiv = ($element) => {
    // removes all elements within a div
    while ($element.firstChild) $element.firstChild.remove();
  }
  
  const init = () => {
    // attach all initial event listeners
    initEventListeners();
  }

    // start program
    init();
  
  // NOTE I use $ for DOM elements, camelCase for function names and snake_case for variable names
});

.flex {
  display: flex;
}

.no-wrap {
  white-space: nowrap;
}

示例：https://jsfiddle.net/q3h05u8e/2/