Order Form with Total Calculator

<div id="orderForm">
  <div class="product" data-price="299">
    <span>Product A - Rs. 299</span>
    <input type="number" min="0" value="0" onchange="calculateTotal()">
  </div>
  <div class="product" data-price="499">
    <span>Product B - Rs. 499</span>
    <input type="number" min="0" value="0" onchange="calculateTotal()">
  </div>
  <div class="product" data-price="199">
    <span>Product C - Rs. 199</span>
    <input type="number" min="0" value="0" onchange="calculateTotal()">
  </div>
  <hr>
  <p>Subtotal: Rs. <span id="subtotal">0</span></p>
  <p>GST (18%): Rs. <span id="tax">0</span></p>
  <p>Shipping: Rs. <span id="shipping">0</span></p>
  <p style="font-size:1.2em;font-weight:bold">Total: Rs. <span id="total">0</span></p>
</div>
<script>
function calculateTotal() {
  let subtotal = 0;
  document.querySelectorAll(".product").forEach(p => {
    const price = parseInt(p.dataset.price);
    const qty = parseInt(p.querySelector("input").value) || 0;
    subtotal += price * qty;
  });
  const tax = Math.round(subtotal * 0.18);
  const shipping = subtotal > 0 ? 49 : 0;
  const total = subtotal + tax + shipping;
  document.getElementById("subtotal").textContent = subtotal;
  document.getElementById("tax").textContent = tax;
  document.getElementById("shipping").textContent = shipping;
  document.getElementById("total").textContent = total;
}
</script>