I am making a Javascript game, where I would like a button (class = "build") to only be visible under certain conditions, and the condition would increase every time after one click the button.

To increase the number by 1, click the "gather" button. To make it more effective, click the "build" button to automatically increase the number by 0.1 per second. That is what's happening in the code below.

But I would like the "build" button to be only visible after the number reached 10. The "build" button would decrease the current number by 50% when one clicks it so that it would become invisible after being clicked.

The second time, the "build" button would only be visible when the number reached 12. Click it, the number decreases 50%, the "build" button disappears. The third time the button would become visible when the number reached 14 (so it's +2 every time"), click it, the number decreases 50%, the "build" button disappears and it goes on and on.

Is there any way for this to work? Thanks!

let btn1 = document.querySelector(".btn1");
let btn2 = document.querySelector(".btn2");
let num = document.getElementById("num");
let increment = 0;

function toGather(){
num.innerHTML++;
}

btn1.addEventListener("click",toGather)

function toBuild() {
increment+=.1

if (increment == .1){
  setInterval(() => {
    num.innerHTML =parseFloat(parseInt((parseFloat(num.innerHTML)+.05+increment)*10)/10);
    
    
  }, 1000)} else num.innerHTML =parseFloat(parseInt((parseFloat(num.innerHTML)+.05+increment)*10)/10);
}

btn2.addEventListener("click",toBuild);

<span id="num">0</span>
<button class="btn1">Gather</button>
<button class="btn2">Build</button>