Html – How to update the total number immediately when i put the value in the table

// Get all inputs
let inputs = document.querySelectorAll("input");

inputs.forEach((input) => input.addEventListener('input', () => calculateTotal()))

function calculateTotal() {
  let rows = document.querySelectorAll("tbody tr");
  let grandTotal = 0;
  let negative = false;

  for (let i = 0; i < rows.length; i++) {
    let row = rows[i];

    let quantityInput = row.querySelector(".quantity input");
    let priceInput = row.querySelector(".price input");
    let totalInput = row.querySelector(".total input");

    let quantity = parseInt(quantityInput.value);
    let price = parseFloat(priceInput.value).toFixed(2);

    if (quantity < 0 || price < 0) {
      negative = true;
      quantity = 0;
      price = 0.00;
      quantityInput.value = "0";
      priceInput.value = "0.00";
    }

    let total = quantity * price;

    totalInput.value = total.toFixed(2);

    grandTotal += total;
  }

  document.querySelector(".GrandTotal").value = grandTotal.toFixed(2);

  if (negative) {
    alert("No Negative Values!")
  }
}

<h1>Book Ordering System</h1>

<table id="myTable">
  <thead>
    <tr>
      <th>No.</th>
      <th>Book Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Unit Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="No">1</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">2</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">3</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">4</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">5</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td class="background-colour" colspan="5">
        <button type="button" onclick="calculateTotal()" class="Button">Calculate Grand Total Price</button>
      </td>
      <td class="background-colour" colspan="2">
        <input type="number" name="Grand Total Price" value="0.00" class="GrandTotal" disabled>
      </td>
    </tr>
  </tfoot>
</table>