Tippy.js - unable to destroy old tooltips

Question

I've been creating a dynamic tippy tooltip. Every time a button is clicked, the content of the tooltip should change. What happens - every time a button is clicked, new tooltip is created and both of them are opened on hover.

My code:

HTML

<button>Button</button>

<div id="1" style="display:none"><span>Some text here</span></br><span>and here</span></div>
<div id="2" style="display:none"><span>Over</span></br></div>

JS

let idIndex = 0;
document.getElementsByTagName('button')[0].addEventListener('click', ()=>{
  tippy('button')[0].destroy();
  idIndex++;
  const content = document.getElementById(`${idIndex}`).innerHTML
  console.log(content);
  tippy('button', {
   allowHTML: true,
   animation: 'shift-away',
   interactive: true,
   content: content,
   maxWidth: 600,
  });

})

I've tried destroying or disabling all the tooltips using loop Tippy.js: Unable to disable tooltips, but nothing helped.