title: How to get id of a dynamic input field in javascript
body: <p>I want to create a dynamic form where I also apply JavaScript to the dynamic elements.</p>
  <p>What I want to do right now is figure out which field (stored in array or whatever data structure) in JavaScript has been clicked so that I can apply the script to that particular field.</p>
  <p>The HTML looks like this:</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-html lang-html prettyprint-override"><code>&lt;div class="triple"&gt;
    &lt;div class="sub-triple"&gt;
      &lt;label&gt;Category&lt;/label&gt;
      &lt;input type="text" name="category" id="category" placeholder="Classes/Instances" required/&gt;
      &lt;ul class="cat-list"&gt;&lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="sub-triple"&gt;
      &lt;label&gt;Relation&lt;/label&gt;
      &lt;input type="text" name="relation" id="relation" placeholder="Properties" required/&gt;
      &lt;ul class="rel-list"&gt;&lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="sub-triple"&gt;
      &lt;label&gt;Value&lt;/label&gt;
      &lt;input type="text" name="value" id="value" placeholder="Classes/Instances" required/&gt;
      &lt;ul class="val-list"&gt;&lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This &quot;triple&quot; div is dynamic and I want to create as many &quot;triples&quot; as the user wants, that also means the input fields of inside the &quot;triple&quot; section increase as well.</p>
  <p>I'm confused on how to add javascript to one element of the input. For example I have inputs: category, relation and value and the user wanted 2 or more triples then the input ids could look like category2, relation2 and value2 or something similar to that.</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>let category = document.getElementById("category");
  
  category.addEventListener("keyup", (e) =&gt; {
    removeElements();
    listDown(category, sortedClasses, ".cat-list")
  
  });</code></pre>
  </div>
  </div>
  </p>
  <p>If I lets say clicked on category2 for instance how do I tell that to my javascript since these fields are completely dynamic.</p>
  <p><strong>Summary:</strong> The user is adding repeat sections of triples (containing 3 input elements), where the id of each input element is generated dynamically. My script above works for the first triple section only as the ids are fixed, as for successive &quot;triple&quot; section the id of the fields get changed. How do I identify (see which element has been clicked) and get these dynamic ids</p>