Why does my code only work on the first click?

Question

When i try writing in textboxes the second time the window shows undefined, and if I try writing in the textboxes for the third time, it shows nothing.

I have a table that i wish to append a tablerow to. So when a button is clicked it will append a tr to a tbody, it works on the first click, but not on the second or third.

var expName = document.getElementById("expName");
var button = document.getElementById("button");
var amount = document.getElementById("amount");
var tbody = document.getElementById("tbody");
var date = document.getElementById("calendar");
var clear = document.getElementById("clear");

//print the tabledata
button.addEventListener("click", function() {
      expName = expName.value;
      amount = amount.value;
      date = date.value;
      var tr = document.createElement("tr");
      tr.innerHTML += "<td>" + expName + "</td>" + "<td>" + amount + "</td>" + "<td>" + date + "</td>";

      //set the value back to the original
      tbody.appendChild(tr);
      document.getElementById("expName").value = "";
      document.getElementById("amount").value = "";
      document.getElementById("calendar").value = "";

      //delte all table rows
      clear.addEventListener("click", function() {
        window.location.reload();

      })

<h1>Expense Tracker</h1>

<b>Item Name: </b><input type="text" id="expName">
<br/>
<br/>
<b>Amount: </b><input type="text" id="amount">

<b>Date: </b><input type="date" id="calendar">
<br/>
<br/>
<button id="button">add expense</button>
<button id="clear">Clear List</button>
<br/>
<br/>

<table id="table">
  <thead>
    <th>Name</th>
    <th>Amount</th>
    <th>Date</th>
  </thead>
  <tbody id="tbody"></tbody>
</table>