title: Target Input and nextElementSibling With forEach Loop / event.Target Property - JavaScript
body: <p>I have a series of forms on a page which each have a simple text counter on the input element (to illustrate the length of a title as it is being typed). When I was working out how to do the counter it was on a singular instance of the form.</p>
  <p>How do I have it so the counter works in relation to the <code>nextElementSibling</code> when there are multiple instances of the form? I would've thought it would be done with <code>e.target</code> property, but I can't work out how to store the input element as a target so to speak? I thought <code>e.target = item</code> in the code below would work but this doesn't.</p>
  <p>Codepen: <a href="https://codepen.io/thechewy/pen/powZppR" rel="nofollow noreferrer">https://codepen.io/thechewy/pen/powZppR</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var title = document.querySelectorAll(".image-title-upload"),
    charsRemaining = document.querySelectorAll(".image-title-upload").nextElementSibling,
    maxValue = 125;
  
  title.forEach((item) =&gt; {
    item.addEventListener("input", (e) =&gt; {
      
      //e.target = item; thought this might work but it doesn't
      
      remaining = maxValue - item.value.length; // work out how many characters are left
  
      charsRemaining.textContent = remaining;
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form {
    margin-bottom: 2rem;
  }
  
  span {
    display: block;
    margin-top: 4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;input class="image-title-upload" type="text" name="image-title" placeholder="Title"&gt;
    &lt;span class="tl characters-remaining"&gt;125&lt;/span&gt;
  &lt;/form&gt;
  
  &lt;form&gt;
    &lt;input class="image-title-upload" type="text" name="image-title" placeholder="Title"&gt;
    &lt;span class="tl characters-remaining"&gt;125&lt;/span&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>