How can I access an object's property from within the same object?

Question

I'm sorry in advance, didn't know how to phrase the problem that I'm facing...

My goal is to create a custom alert box. I know there are various plugins, but I want to learn how such a plugin was created.

So here's what I tried... The problem is that I access the alerter object's properties:

let alerter = {
  status: false,
  title: "AlerterTitle",
  message: "This is a small alert!",
  snippet: `<div id="alerter">
                        <div class="alerter-title">${this.title}</div>
                        <div class="alerter-body">${this.message}</div>
                        <button id="alerter-close">Close</button>
                    </div>`,

  show: function(message, title = "Alert") {
    if (this.status) {
      return true;
    }

    // set values for title and message
    this.status = true;
    this.title = title;
    this.message = message;

    document.body.innerHTML += this.snippet; // add alertBox to the body with changed values

    // event listener for close action
    const closeBtn = document.querySelector("#alerter-close");
    closeBtn.addEventListener("click", function() {
      let alertBox = document.querySelector("#alerter");
      document.body.removeChild(alertBox);
      alerter.status = false; //also can somebody explain why I cant use this.satus instead of alerter.status
    })
  }
}

#alerter{
            border: 1px solid red;
            padding: 10px;
        }

<button onclick="alerter.show('This is another alert')">Click me</button>

The message and the title of the alert box becomes undefined, but if I console log it, it logs the correct value.

Thanks in advance.