Animation only works on first element when using Var CSS

I have found a lovely button animation and implemented it using a tutorial from this video. The button animation works on the first button, however not properly on the second.

It uses JavaScript and CSS var() to generate an animation, both of which I am not familiar with.

HTML and JavaScript is as follows, Run Snippet to see what I mean:

.btn {
  position: relative;
  display: inline-flex;
  height: 50px;
  width: 100px;
  background: #ffffff;
  /* color: rgb(11, 81, 211); */
  border: 2px solid rgb(11, 81, 211);
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 1px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn span {
  padding-left: 50%;
  padding-right: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
  font-size: 20px;
  color: rgb(11, 81, 211);
}

.btn span:hover {
  color: rgb(255, 255, 255);
}

.btn::before {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgb(11, 81, 211);
  transition: width 0.5s, height 0.5s;
}

.btn:hover::before {
  width: 1200px;
  height: 1200px;
  color: white;
}

<div>
  <button type="submit" class="btn" id="button1"><span>Plot</span></button>
  <script>
    const btn = document.querySelector('.btn');
    btn.onmousemove = function(e) {
      const x = e.pageX - btn.offsetLeft;
      const y = e.pageY - btn.offsetTop;

      btn.style.setProperty('--x', x + 'px');
      btn.style.setProperty('--y', y + 'px');
    }
  </script>
</div>

<div>
  <button type="submit" class="btn" id="button2"><span>Plot</span></button>
  <script>
    const btn2 = document.querySelector('.btn');
    btn2.onmousemove = function(e) {
      const x = e.pageX - btn2.offsetLeft;
      const y = e.pageY - btn2.offsetTop;

      btn2.style.setProperty('--x', x + 'px');
      btn2.style.setProperty('--y', y + 'px');
    }
  </script>
</div>

I have tried renaming the function, the var() etc. but with no luck.
Perhaps I could use Id’s and pass to the CSS, but I am struggling to find a method that would allow a dynamic number of buttons to be created.

Any help much appreciated.