JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  
Total Rocks: <input id="txtNumber" type="text" value="0" onfocus="this.blur()" 
style=" border:none; text-align:center; background-color:transparent;" />
<br>
  
<img style="border:0;" src="http://img2.wikia.nocookie.net/__cb20130308043142/minecraftpocketedition/images/6/6d/Pickaxe_1.jpeg" onclick="javascript:add()">
<br>
  
Rocks per second: <input id="perSec" type="text" value="0" onfocus="this.blur()" 
style="width:30px; border:none; text-align:center; background-color:transparent;" />
<br>     
  
Shovel(<input id="shovelCount" type="text" value="0" onfocus="this.blur()" 
style="width:20px; border:none; text-align:center; background-color:transparent;" />): 5 rocks 

<input id="shovelBuy" type="button" value="Buy" onclick="javascript:shovel()"/>

</body>
</html>

JavaScript

var totalRocks = 0;
var rocksPerSec = 0;
	function increment() {
       var txtNumber = document.getElementById("txtNumber");
       var newNumber = parseFloat(txtNumber.value, 10) + rocksPerSec;
       txtNumber.value = newNumber;
	}
setInterval(function(){increment();}, 1000);

function add()
{
  var txtNumber = document.getElementById("txtNumber");
  var newNumber = parseFloat(txtNumber.value, 10) + 1;
  txtNumber.value = newNumber;
}

function shovel()
{
  var txtNumber = document.getElementById("txtNumber");
  var value = parseFloat(txtNumber.value, 10);
  if(value >= 5){
    var newNumber = parseInt(txtNumber.value, 10) - 5;
    txtNumber.value = newNumber;
    var shovelCount = document.getElementById("shovelCount");
    var newCount = parseFloat(shovelCount.value, 10) + 1;
    shovelCount.value = newCount;
    
    rocksPerSec = rocksPerSec +0.2;
    return false;
  } 
}