Textbox on my calculator not taking in multiple values

  html, javascript

I am trying to make a calculator app. The problem I have run into is that when I press a button on my calculator the value of the button appears onto the textbox. But as soon as another button is pressed it erases the previous value and puts in the new one. How can I fix this so that it shows multiple values?

JavaScript Code:

var buttonValue = document.querySelectorAll('button');

for(var i = 0; i < 16; i++){
  document.querySelectorAll('button')[i].addEventListener('click', function(){
    var buttonInnerHTML = this.innerHTML


function displayText(currentKey){
   var activeButton = document.querySelector('input')
   activeButton.value = currentKey;


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <meta charset="utf-8">
  <link rel="stylesheet" href="calulator.css">

  <div class='calulator-border'>
      <input type="text" id="text-box" value="0">

      <button class='btn'>1</button>
      <button value="2">2</button>
      <button value="3">3</button>
      <button value="+">+</button>

      <button value="4">4</button>
      <button value="5">5</button>
      <button value="6">6</button>
      <button value="-"> - </button>

      <button value="7">7</button>
      <button value="8">8</button>
      <button value="9">9</button>
      <button value="*">*</button>

      <button value="0">0</button>
      <button value="/" class='operator-division' style=''>/</button>
      <button value="=" class='operator-euqals'>=</button>

      <button class='clear-button'>C</button>

  <script src="calulator.js" charset="utf-8"></script>


Source: Ask Javascript Questions