title: addeventlistener to every item in foreach loop
body: <pre><code>I have a node list in a variable 
  
      connectedAnalysis = document.querySelectorAll('.connAnalysisUl li')
  
  each li represents some text which I want to be removed when clicked on that li tag. 
  
  I have code like this 
  
      connectedAnalysis.forEach((item) =&gt; {
         item.addEventListener('click', (e) =&gt; {
             e.preventDefault()
             console.log(item)
            })
         })
  </code></pre>
  
  <p>Then I've noticed some strange behavior. If I have 3 elements in my node list and if I click on the first one I will get console log 3 times, if I click on the second li I will get console log twice. So before I continue I would like to understand why this is happening and how to prevent this. I read a lot about event propagation and etc and nothing could help me to understand the situation I'm facing here. What I want is that if I click on any item it is fired only once.</p>
  
  <p>here is the full code</p>
  
  <pre><code>    //here I'm defining some variables
  
   let connectedAnalysis = document.getElementById('connectedAnalysis')
   let getAnalyisisNameDiv = document.getElementById('resultConnectedAnalysis')
   let relatedAnalysisParent = document.getElementById('relatedAnalysis')
   let parentUl = document.querySelector('.connAnalysisUl')
  
      //here I'm listening for users input and then I query mongoDB collection, I'm displaying all the result as li items
  
  connectedAnalysis.addEventListener('input', (e) =&gt; {
        if (connectedAnalysis.value.length &gt; 2) {
        fetch('/analysis/'+e.target.value).then((data) =&gt; {
          data.json().then((result) =&gt; {
            getAnalyisisNameDiv.innerHTML = ''
            for(i=0; i&lt;result.length; i++) {
              let liItem = document.createElement('li')
              liItem.className +="list-group-item"
              let link = document.createElement('a')
              link.href=result[i]._id
              liItem.appendChild(link)
              let analysisName = document.createTextNode(result[i].analysisName)
              link.appendChild(analysisName)
              getAnalyisisNameDiv.appendChild(liItem)
            } // for end
  
  //here I would like to take all li tags inside my ul tag and when the user clicks on li item I would like to add it to the DOM
  
  let analysisNameList = document.querySelectorAll('#resultConnectedAnalysis li')
  
              analysisNameList.forEach((item) =&gt;  {
                item.addEventListener('click', (e) =&gt; {
                  e.preventDefault()
  
                  // creating hidden input tag and grab analysis id
                  let connectedAnalysisID = document.createElement('input')
                  connectedAnalysisID.type = 'hidden'
                  connectedAnalysisID.name = 'connectedTo[]'
                  connectedAnalysisID.setAttribute('value', e.srcElement.attributes.href.textContent)
  
  //here I'm creating a remove button
                  let removeButton = document.createElement('small')
                  removeButton.className += 'ml-1 float-right removeConnectedAnalysis'
                  let removeText = document.createTextNode('x')
                  removeButton.appendChild(removeText)
  
  //here I'm creating li tag and adding everything to the DOM
  
                  let connectedAnalysisLi = document.createElement('li')
                  connectedAnalysisLi.className += 'list-inline-item __connectedAnalysis'
                  let connectedAnalysisInnerText = document.createTextNode(e.target.innerText)
                  connectedAnalysisLi.appendChild(connectedAnalysisInnerText)
                  connectedAnalysisLi.appendChild(removeButton)
                  connectedAnalysisLi.appendChild(connectedAnalysisID)
                  connectedAnalysisLi.appendChild(connAnalysisName)
                  parentUl.appendChild(connectedAnalysisLi)
                  relatedAnalysisParent.appendChild(parentUl)
  
    //here I would like to remove item which is added by the user
                  let removeConnectedAnalysis = document.querySelectorAll('.connAnalysisUl li')
  
          removeConnectedAnalysis.forEach((item) =&gt; {
            item.addEventListener('click', (e) =&gt; {
              e.preventDefault()
                item.remove()
            })
          })
  
                    })// addeventlistener end
                  })// analysisNameList end
              })// datajson end
            })// fetch end
          } else {
              getAnalyisisNameDiv.innerHTML = ''
            }
          })// connectedAnalysis event listener end
  </code></pre>
  
  <p>I believe that I got lost in loops and scopes and some other thing that I'm trying to learn. If you could help me to better understand my mistakes I will appreciate this very much. Thanks</p>