TinyMDE unexpected behavior

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.css"
    />
  </head>

  <body>
    <div id="toolbar-1"></div>
    <div id="editor-1"></div>
    <div id="toolbar-2"></div>
    <div id="editor-2"></div>
    <div id="toolbar-3"></div>
    <div id="editor-3"></div>
    <div id="toolbar-4"></div>
    <div id="editor-4"></div>
    <button id="get-content">Get content</button>
    <script src="lib/script.js"></script>
  </body>
</html>

/* Add your styles here */

// Add your code here
const editors = document.querySelectorAll('[id|=editor]');
const toolbars = document.querySelectorAll('[id|=toolbar]');
const btn = document.getElementById('get-content');
const editorInstances = [];

editors.forEach((editor, idx) => {
  const tinyEditor = new TinyMDE.Editor({ element: editor, content: '' });
  const tinyToolbar = new TinyMDE.CommandBar({ element: toolbars[idx], editor: tinyEditor });
  editorInstances.push(tinyEditor);
});

btn.addEventListener('click', () => {
  editorInstances.forEach((editor) => {
    console.log(editor.getContent());
  })
});