How do I change the two "click" EventListeners to do the opposite function in JavaScript?

Question

I just started learning JavaScript, and I am trying to get two different EventListeners to do the opposite function. Right now, I have it so that you can click on a mark and then a word, letter, or space and the mark appears/disappears there. I want to be able to click a word, letter, or space then click on a mark to add/remove it. Sentence Punctuation Marks I've tried switching the .querySelector and .querySelectorAll, but that doesn't work. Any help would be much appreciated.

var classlist = el.querySelectorAll(".letter, .space");
for (var i = 0; i < classlist.length; i++) {
  classlist[i].addEventListener("click", function(event) {
    var element = this.parentNode;
    console.log(this);
    if (
      tooltype === "longVowel" ||
      tooltype === "shortVowel" ||
      this.classList.contains("space") === true
    ) {
      element = this;
      console.log(element);
    }
    var add = true;
    var checklist = element.querySelectorAll("." + tooltype);
    if (checklist.length > 0) {
      add = false;
    }

    socket0s6.emit("action", {
      slide: demo6,
      action: "markingWords",
      element: element.id,
      class: tooltype,
      add: add,
    });
  });
}

var classlist = el.querySelector(".toolbar").querySelectorAll("li");
for (var i = 0; i < classlist.length; i++) {
  classlist[i].addEventListener("click", function(event) {
    tooltype = this.className;
  });
}

document.getElementById("slideContainer").appendChild(el);

/*}

//var oReq = new XMLHttpRequest();
//oReq.addEventListener("load", reqListener);
//oReq.open("GET", "slides/lesson0/slide6.html");
//oReq.send();*/

/*************** Server action ******************/
//socket0s6.on('action', function(details) {
var socket0s6 = {
  emit: function(a, details) {
    //  //console.log(details[1]);
    if (details.slide === demo6 && details.action === "markingWords") {
      //document.getElementById(details.element).classList.toggle("active");
      if (details.add) {
        var el = document.createElement("span");
        el.className = details.class;
        document.getElementById(details.element).appendChild(el);
      } else {
        //where we will put code to find and remove existing marks
        var markList = document
          .getElementById(details.element)
          .querySelectorAll("." + details.class);
        console.log(markList);
        for (var i = 0; i < markList.length; i++) {
          markList[i].parentNode.removeChild(markList[i]);
        }
      }
    }
  },
};