Why only the first function inside onclick event handler sets innertext properly and the second one-CodePudding

I tried to create a basic expense tracker website using DOM manipulation. When I am calling two function at a time in an onClick event handler, the one I called at first place does it's job fine to set the innertext in html. But the function I call after first one sets the innerText as NaN! It behaves same even if I replace the position of the function. Here is my HTML & JS code in order.

HTMl:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Expense Tracker</title>
    <!-- Tailwind link -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- External Css link -->
    <link rel="stylesheet" href="CSS/style.css" />
  </head>
  <body>
    <header>
      <h1
        
      >
        Expense Tracker