I'm trying to create child records when a user checks a checkbox widget (and delte when unchecked). I've tried to put a createRecord() and deleteRecord() in the change handler for the checkbox, but i get "Uncaught (in promise) TypeError: Cannot read property 'dispatchEvent' of undefined"

I've also tried to put the createRecord in a separate button, which will create the record, but will also create duplicates and requires looking for multiple changes rather than reacting to each click like I might in the checkbox handler.

Below is the checkbox change handler. I'm getting errors on the dispatch event (misusing the this. perhaps?) removing this.dispatchEvent() eliminates the error, but records are neither created nor deleted and I don't know why. Please help me better understand creating and deleteing records. Thanks in advance.

handleChange(e) {
    const beforeChangeList = this.selectedOptions;
    const afterChangelist = e.detail.value;
    const aRecId = this.recordId;
    this.selectedOptions = e.detail.value;

    console.log("before >>>> " + beforeChangeList);
    console.log("after >>>> " + afterChangelist);

    // Compare list for adds
    afterChangelist.forEach(function(element) {
      if (beforeChangeList.includes(element)) {
        console.log(">>>>, do nothing for " + element);
      } else {
        console.log(">>>>, add " + aRecId + " - " + element);
        const fields = { DealID: aRecId, Agent_Order__c: 1, Agent__c: element };
        const recordInput = { apiName: COMMISSION_OBJECT.objectApiName, fields };
        console.log(">>>> add " + JSON.stringify(recordInput));
        createRecord(recordInput)
          .then(lda_commission__c => {
            this.dispatchEvent(
              new ShowToastEvent({
                title: "Success",
                message: "Commission added",
                variant: "success"
              })
            );
            console.log(">>>> record created");
          })
          .catch(error => {
            this.dispatchEvent(
              new ShowToastEvent({
                title: "Error creating record",
                message: reduceErrors(error).join(", "),
                variant: "error"
              })
            );
            console.log(">>>> record not created." + reduceErrors(error).join(", "));
          });
      }
    });

    // Compare list for deletes
    beforeChangeList.forEach(function(element) {
      if (afterChangelist.includes(element)) {
        console.log(">>>>, do nothing for " + element);
      } else {
        console.log(">>>>, drop " + element);
        deleteRecord(element)
          .then(() => {
            this.dispatchEvent(
              new ShowToastEvent({
                title: "Success",
                message: "Commission is deleted",
                variant: "success"
              })
            );
            console.log(">>>> comm deleted");
          })
          .catch(error => {
            this.dispatchEvent(
              new ShowToastEvent({
                title: "Error while deleting commission",
                message: error.message,
                variant: "error"
              })
            );
            console.log(">>>> com not deleted." + error.message);
          });
      }
    });
  }