How do I stop an interval from another function in javascript?

Question

So, my problem is that I am trying to make a program that increments a number every millisecond, but when I run the code and press the stop incrementing button, it does not do anything to clear the interval. It just continues incrementing, completely ignoring the clearInterval(). I have tried executing the si function in the oc function, but then I thought how stupid that was. I looked online, and I just found how to run a function from another function, but it would not work. Here is the html:

<button onclick="oc()">
  Start incrementing number
</button>
<button onclick="si()">
  Stop incrementing number
</button>
<div id="d1">

</div>

And here is the Javascript:

function oc() {
  var d1 = document.getElementById("d1")
  var incremental = 0
  var i = setInterval(function() {
    incremental++;
    d1.innerHTML = "Number: " + incremental
  }, 0.01)
}

function si() {
  clearInterval(i)
}

Please make the answer as simple as you can.