Day.jsを使用して、開始時刻、終了時刻を取得して、差分を計算したい。

Question

Day.js（https://day.js.org/）
を使用して、時刻の差分を計算したいが、JavaScriptの初心者のため躓いています。

HTML

<div class="time-wrap">
  <ul class="control-list">
    <li>
      <input class="item" type="button" id="start" value="START" onclick="start()">
    </li>
    <li>
      <input class="item" type="button" id="stop" value="STOP" onclick="stoped()">
    </li>
    <li>
      <input class="item" type="button" id="done" value="DONE" onclick="done()">
    </li>
  </ul>
</div>

function start() {
  var x = dayjs().format('YYYY/M/D hh:mm:ss')
  console.log(x, 'に開始しました。');
}

function stoped() {
  var y = dayjs().format('YYYY/M/D hh:mm:ss')
  console.log(y, 'に完了しました。');  
}

function done() {
  var duration = dayjs.duration(x.diff(y))
  console.log(duration);
}

変数はスコープ内でしか扱えないので、差分が計算できないのですが、スコープ外でする方法がわからずです。
答えではなく、方法だけでも教えていただけると助かります。
初歩的な内容ですみません、、