I am trying to use the MDBootstrap WYSIWYG plug-in to enhance my forms, but am coming up short.

It does not seem to appear to be a class that can be applied to a textarea; doing so only displays the form element without the enhanced functions and toolbar. Instead, the docs say to create an instance as follows

<div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" id="foo" name="foo">

However, when submitting a form that includes the above div, the value contained is not "posted" or "getted".

I have seen a post (https://mdbootstrap.com/snippets/standard/m-duszak/3256156#js-tab-view) that suggests what to do, using Javascript, but I don't understand it. The HTML they give (with the addition of the first textarea that I have added) is:

<form>
   Title:
   <textarea name="title" cols="60" rows="2"><?php echo $Story->title; ?></textarea>

  <div class="first-area">
    <div class="wysiwyg" data-mdb-wysiwyg="wysiwyg">
        </div>
  </div>

  <button type="submit" class="btn btn-primary">
    Submit
  </button>
</form>

The JS is:

const formEl = document.querySelector('form');
const firstArea = document.querySelector('.first-area .wysiwyg-content');
formEl.addEventListener('submit', (e) => {
  e.preventDefault();
  alert(`Text area content: ${firstArea.innerText}, but you can also get HTML: ${firstArea.innerHTML}`)
})

What I need to do is get what is there into a $_POST or $_GET or via some method that I can then use to process for a MYSQL insert or update. Any help would be appreciated.