How to display multiple user input

Question

I'm trying to get user input and display it back to the user but it keeps resetting after the user inputs something e.g. start with 1000 then input 10 cash and it comes up with 990 but after you do it again and put in 20 it doesn't save the 990 you input and instead starts over and outputs 980

You can see what I mean here

https://codepen.io/scottajames/pen/mddreXz

//  Hides everything in the Content-2 Div-
document.getElementById("Content-2").hidden = true;

// Unhides everything in the content-2 div and hides everything in the content-1 div and saves the input of the monthly id 
function FirstButton() {
  var a = document.getElementById("Monthly").value;
  document.getElementById("Monthly-Amount").innerHTML = a;
  document.getElementById("Content-2").hidden = false;
  document.getElementById("Content-1").hidden = true;
}
// adds the content-2 inputs together and takes away the price from the total
function SecondButton() {
  var b = document.getElementById("Item").value;
  var c = document.getElementById("Price").value;
  document.getElementById("Item-Price").innerHTML = b + ' ' + c;

  var d = document.getElementById("Monthly").value;
  document.getElementById("Monthly-Amount").innerHTML = d - c;
}

body {
  background: #34EBC6;
}

#Content {
  margin: 0 auto;
  position: relative;
  top: 200px;
  width: 500px;
}

input {
  width: 350px;
  height: 60px;
  outline: none;
  font-size: 24px;
  padding-left: 30px;
  display: inline-block;
  border-radius: 5px;
  border: none;
  background: #0e8b72;
  color: white;
}

::placeholder {
  color: white;
}

button {
  position: relative;
  height: 60px;
  width: 100px;
  font-size: 25px;
  border-radius: 5px;
  border: none;
  color: white;
  background: #0e8b72;
}

#Content-1 h1 {
  position: relative;
  left: 100px;
  color: white;
  font-size: 25px;
  font-family: sans-serif;
  font-weight: 400;
}

#Content-2 h1 {
  color: white;
  font-size: 25px;
  font-family: sans-serif;
  font-weight: 400;
}

#Monthly-Amount {
  position: relative;
  top: -10px;
  left: 150px;
  font-size: 40px;
  font-family: sans-serif;
  color: white;
  font-weight: 400;
}

#Item-Price {
  position: relative;
  top: 50px;
  border-top: 1px solid black;
  padding-top: 25px;
  padding-left: 25px;
}

<div id="Content">

  <div id="Content-1">
    <h1>Monthly Budget </h1><input type="text" id="Monthly" placeholder="0.00" required>
    <button id="Button-1" onclick="FirstButton()">Next</button>
  </div>

  <h1 id="Monthly-Amount"></h1>


  <div id="Content-2">


    <h1>Item: </h1><input type="text" id="Item" placeholder="Item" required>
    <h1>Price: </h1><input type="text" id="Price" placeholder="Price" required>
    <button id="Button-2" onclick="SecondButton()">Next</button>

    <h1 id="Item-Price"></h1>
  </div>
</div>

Answer 1

Just incase anyone comes across this later and is having the same issue all you have to do is add a += instead of just = as the output

from

document.getElementById("Item-Price").innerHTML = b +' '+ c;

to

document.getElementById("Item-Price").innerHTML += b +' '+ c;

and

  var d = document.getElementById("Monthly").value;
  document.getElementById("Monthly-Amount").innerHTML = d - c;

gets changed to just

document.getElementById("Monthly-Amount").innerHTML -=  c;