Embedding Event Listeners in Instances of a Class – javascript

I’m trying to embed an event listener in instantiations of a class and then when a button associated with any particular instance is pressed it updates the corresponding instance’s totalWalksTaken properties on a button click. I could not get it working so instead I added a listener that compared the button’s instance-related ID with all generated instances. I’m going to use this code example for students learning javascript so for their sake and mine, I’d like to know, a) if and how embedding in the event listener in the Pet class is possible; b) if doing so is preferable to other approaches; c) any issues that might arise in doing it as it is below (provided I used unique identifiers for each instance to attach to the button id). Thanks!

https://codepen.io/olmansju/pen/jOGXxqL

    class Pet {
  constructor(name, petType, breed, weight, weightUnit, dob, owner, alive, imageURL){
    this.name = name;
    this.petType = petType; 
    this.breed = breed;
    this.weight = weight; 
    this.weightUnit = weightUnit; 
    this.dob = dob;
    this.owner = owner;
    this.alive = alive;
    this.imageURL = imageURL;
    this.totalWalksTaken = 0;
    this.dateEntered = new Date(); 
  }
  takePetForWalk(){
    this.totalWalksTaken +=1;
    console.log(`let's take ${this.name} for walk #${this.totalWalksTaken}`);
    return this;
  }
  updatePet(){
    document.getElementById(this.owner).innerHTML = `<img src=${this.imageURL} width="400"> <br>Meet <b>${this.name}</b>, a ${this.breed} who has gone on ${this.totalWalksTaken} walks!<button class="button" id=${this.name}>Take ${this.name} on a walk... </button>`;
    return this;
  }
}

const petOne = new Pet("Daisy", "dog", "shiba inu mix", 44, "lbs", "10-MAY-2018", "Justin", "alive",
                          "https://www.petguide.com/wp-content/uploads/2015/07/carolina-dog.jpg");

const petTwo = new Pet("Rhoda", "dog", "boston terrier", 21, "lbs", "10-NOV-2015", "Nick", "alive",
                          "https://www.akc.org/wp-content/uploads/2017/11/Boston-Terrier-MP.jpg");

const petThree = new Pet("Tikka", "dog", "poodle", 71, "lbs", "10-APR-2016", "Theresa", "alive",
                          "https://www.k9ofmine.com/wp-content/uploads/2018/01/types-of-poodles-2.jpg");

petOne.takePetForWalk().takePetForWalk();
petOne.takePetForWalk();

const petArray = [petOne, petTwo, petThree]; 

petArray.forEach(function(pet){
  addPetToDisplay(pet);
  console.log(pet.name);
  });
  
document.addEventListener('click', function(event){
  console.log(event.target.id);
  if (event.target.id === "submitPet"){
    buildNewPetObjectFromSubmittedForm();
    event.preventDefault();
  } else {
  petArray.forEach(function(pet){
    if (pet.name === event.target.id) {
      pet.takePetForWalk().updatePet();
    }
  })
  }
})

function buildNewPetObjectFromSubmittedForm(){
  let petName = document.forms[0].querySelector('input[name="petname"]').value;
  let petType = document.forms[0].querySelector('select[name="animalType"]').value;
  let breed = document.forms[0].querySelector('input[name="breed"]').value;
  let weight = document.forms[0].querySelector('input[name="weight"]').value;
  let units = document.forms[0].querySelector('select[name="units"]').value;
  let dob = document.forms[0].querySelector('input[name="dob"]').value;
  let owner = document.forms[0].querySelector('input[name="owner"]').value;
  let status = document.forms[0].querySelector('select[name="status"]').value;
  let imageURL = document.forms[0].querySelector('input[name="imageURL"]').value;
  let nextPet = new Pet(petName, petType, breed, weight, units, dob, owner, status, imageURL);
  addNewPetToPetArray(nextPet);
  addPetToDisplay(nextPet);
  resetPetForm(nextPet.name);
}

function addNewPetToPetArray(petObject){
  petArray.push(petObject);
  console.log("petArray length is now:", petArray.length);
}

function addPetToDisplay(newPet){
  console.log("newPet object passed pet name of:", newPet.name);
  document.getElementById("objects").innerHTML += `<div class="pets" id=${newPet.owner}><img src=${newPet.imageURL} width="400"> <br>Meet <b>${newPet.name}</b>, a ${newPet.breed} who has gone on ${newPet.totalWalksTaken} walks!<button class="button" id=${newPet.name}>Take ${newPet.name} on a walk... </button></div><br>`;
  console.log("added to display:", newPet.name);
}

function resetPetForm(addedPetName){
  document.getElementById("addPetForm").reset(); 
  updatePetIngestionStatus(addedPetName);
}

function updatePetIngestionStatus(petName){
  document.getElementById("statusUpdate").innerHTML = `*${petName} has been added below!`;
}