Add Event Listener is firing multiple times

It is a map application where you basically log an event after clicking on the map. The problem I am facing is when I click on formSubmit button, it fires addEventlistner multiple times (with respect to the number of times it gets clicked).

for example : if I click formSubmit button for the first time, addEventlistener attached to it will call the function one time. then when I click on formSubmit for 2nd time, then the addEventlistener will fire for 2 times. Then again when I click it for 3rd time, the eventlistener will fire thrice.

const _loadMap = (pos) => {
    let { latitude: lat, longitude: lng } = pos.coords;
    let coords = [lat, lng];

    map = L.map("map").setView(coords, 13);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);

    //click on map
    map.on("click", () => {
      _showForm();
    });
  };
  const _showForm = () => {
    
    form.style.display = "flex";
    formSubmit.addEventListener("click", () => {
      //console.log("add fields");
      _addField();
    });
  };

  const _addField = () => {
    if (!formHeading.value || !formDescription.value) {
      alert("empty fields");
    }

    if (formHeading.value && formDescription.value) {
      //created comp div
      const comp = document.createElement("div");
      comp.classList.add("card__comp--div");
      //created comp info div
      const compInfo = document.createElement("div");
      compInfo.classList.add("comp__info");
      comp.appendChild(compInfo);
      //created comp title
      const compTitle = document.createElement("h1");
      compTitle.classList.add("comp__info--tilte");
      compTitle.innerText = formHeading.value;
      compInfo.appendChild(compTitle);

      //created comp description
      const compDescription = document.createElement("p");
      compDescription.innerText = formDescription.value;
      compDescription.classList.add("comp__info--description");
      compInfo.appendChild(compDescription);

      //created submit button
      const clearBtn = document.createElement("button");
      clearBtn.classList.add("comp--clear");
      clearBtn.innerText = "clear";
      comp.appendChild(clearBtn);

      //Append comp to comp container
      compContainer.appendChild(comp);

      //hide form
      _hideForm();
    }
  };

  const _hideForm = () => {
    // console.log("hide");
    form.style.display = "none";
    formHeading.value = "";
    formDescription.value = "";
  };

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW