<div class="btns"><button id="addbtn">Add Person</button><button id="rmvbtn">Remove Person</button> <span class="counts">Humans: <span id="human-count">0</span> Zombies: <span id="zombie-count">0</span></span></div>
<div class="humans">
  <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies">
  <postapocalyptic-person></postapocalyptic-person>
</div>

* {
  box-sizing: border-box;
}
body {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  --btn-height: 3em;
}
.btns {
  width: 100%;
  padding: 0.5em;
  height: var(--btn-height);
  text-align: center;
}
button {
  height: 3em;
  padding: 0.75em;
  background-color: #960b0b;
  color: #fff;
  border: none;
  border-radius: 0.5em;
  text-align: center;
}
.humans,
.zombies {
  width: 50%;
  min-height: calc(100vh - var(--btn-height));
  padding: 2em;
  background-color: #ddd;
}
.zombies {
  background-color: #ded;
}

.counts {
  margin-left: 1em;
}
.counts span {
  min-width: 1em;
  border: 1px solid #960b0b;
  padding: 0.25em;
  margin-right: 0.5em;
}

customElements.define(
  "postapocalyptic-person",
  class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: "open" });
    }
    connectedCallback() {
      let image = document.createElement("img");
      if (this.parentNode.classList.contains("humans")) {
        image.src = "https://assets.codepen.io/1804713/lady.png";
        this.shadowRoot.appendChild(image);
        let humancount = document.getElementById("human-count");
        humancount.innerHTML = parseInt(humancount.textContent) + 1;
      } else if (this.parentNode.classList.contains("zombies")) {
        image.src = "https://assets.codepen.io/1804713/ladyz.png";
        this.shadowRoot.appendChild(image);
        let zombiecount = document.getElementById("zombie-count");
        zombiecount.innerHTML = parseInt(zombiecount.textContent) + 1;
      }
    }
    disconnectedCallback() {
      let image = this.shadowRoot.querySelector("img");
      if (image.src == "https://assets.codepen.io/1804713/lady.png") {
        let humancount = document.getElementById("human-count");
        humancount.innerHTML = parseInt(humancount.textContent) - 1;
      } else if (image.src == "https://assets.codepen.io/1804713/ladyz.png") {
        let zombiecount = document.getElementById("zombie-count");
        zombiecount.innerHTML = parseInt(zombiecount.textContent) - 1;
      }
    }
  }
);

let zombienest = document.querySelector(".zombies"),
  humancamp = document.querySelector(".humans");

document.getElementById("addbtn").addEventListener("click", function () {
  if (Math.random() > 0.5) {
    zombienest.appendChild(document.createElement("postapocalyptic-person"));
  } else {
    humancamp.appendChild(document.createElement("postapocalyptic-person"));
  }
});
document.getElementById("rmvbtn").addEventListener("click", function () {
  if (Math.random() > 0.5) {
    if (zombienest.lastElementChild) {
      zombienest.lastElementChild.remove();
    } else {
      console.log("No more zombies to remove");
    }
  } else {
    if (humancamp.lastElementChild) {
      humancamp.lastElementChild.remove();
    } else {
      console.log("No more humans to remove");
    }
  }
});