title: Manipulating values of dynamically created objects?
body: <p>I have a javascript function which takes the values from JSON objects in an array, and creates/populates divs with an HTML template. When they are generated, they look like this on the page:</p>
  <p><a href="https://i.stack.imgur.com/4S8HI.png" rel="nofollow noreferrer">dynamic objects elem</a></p>
  <p>Each object that is created has four buttons that are cloned with it. When I click the &quot;dam&quot; button, I want to be able to affect the value of the object it is in. To further clarify with the following picture, if the purple button is clicked, I want to modify the purple value. If the yellow button is clicked, I want to modify the yellow value, and so on.</p>
  <p><a href="https://i.stack.imgur.com/ioYdi.png" rel="nofollow noreferrer">colorized generated elems</a></p>
  <p>Here is the template being cloned:</p>
  <pre><code>&lt;template id=&quot;tracktemp&quot;&gt;
  
    &lt;div class=&quot;trackerItem&quot;&gt;
      &lt;div class=&quot;itemNameTextCont&quot;&gt;
        &lt;p class=&quot;itemNameText&quot;&gt;Combatant Name&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;itemHpTextCont&quot;&gt;
        &lt;h3 class=&quot;hpTextHeader&quot;&gt;HP&lt;/h3&gt;
        &lt;p class=&quot;itemHpText&quot;&gt;HP 100&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;itemApTextCont&quot;&gt;
        &lt;h3 class=&quot;apTextHeader&quot;&gt;AP&lt;/h3&gt;
        &lt;p class=&quot;itemApText&quot;&gt;AP 30&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;itemActionButtonsCont&quot;&gt;
        &lt;div class=&quot;actionButtonCont&quot;&gt;&lt;button class=&quot;actionButton&quot;&gt;Heal&lt;/button&gt;&lt;/div&gt;
        &lt;div class=&quot;actionButtonCont&quot;&gt;&lt;button class=&quot;actionButton&quot;&gt;Dam&lt;/button&gt;&lt;/div&gt;
        &lt;div class=&quot;actionButtonCont&quot;&gt;&lt;button class=&quot;actionButton&quot;&gt;Stat&lt;/button&gt;&lt;/div&gt;
        &lt;div class=&quot;actionButtonCont&quot;&gt;&lt;button class=&quot;actionButton&quot;&gt;Abil&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;itemModifyButtonsCont&quot;&gt;
        &lt;div class=&quot;modifyButtonCont&quot;&gt;&lt;button class=&quot;modifyButton&quot;&gt;Edit&lt;/button&gt;&lt;/div&gt;
        &lt;div class=&quot;modifyButtonCont&quot;&gt;&lt;button class=&quot;modifyButton&quot;&gt;Remove&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/template&gt;
  </code></pre>
  <p>The area of the page it is cloning to (inside trackerCont Div):</p>
  <pre><code>&lt;section class=&quot;trackerModule&quot;&gt;
      &lt;div class=&quot;trackerModuleCont&quot;&gt;
        &lt;div class=&quot;trackerHeaderCont&quot;&gt;
          &lt;h2 class=&quot;trackerHeader&quot;&gt;Combatants&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class=&quot;trackerTopButtonsCont&quot;&gt;
          &lt;div class=&quot;topButtonCont&quot;&gt;&lt;button class=&quot;topButton&quot;&gt;Add&lt;/button&gt;&lt;/div&gt;
          &lt;div class=&quot;topButtonCont&quot;&gt;&lt;button class=&quot;topButton&quot;&gt;Add From&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id=&quot;trackerCont&quot; class=&quot;trackerCont&quot;&gt;
  
          
        &lt;/div&gt;
        &lt;div class=&quot;trackerBottomButtonsCont&quot;&gt;
          &lt;div class=&quot;bottomButtonCont&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;bottomButtonCont&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
  </code></pre>
  <p>And the JS doing the cloning.</p>
  <pre><code>var trackerArray = [
      {Name: &quot;Joe Brown&quot;, HP: 100, AP: 30},
      {Name: &quot;Steve Smith&quot;, HP: 100, AP: 30},
      {Name: &quot;Jane&quot;, HP: 100, AP: 30}
  ]
  
  function buildTracker() {
      var trackerLength = trackerArray.length;
      for (i = 0; i &lt; trackerLength; i++) {
          var trackItemTemp = document.getElementById('tracktemp').content.cloneNode(true);
          var combatant = trackerArray[i];
          var itemParent = document.getElementById('trackerCont');
          trackItemTemp.querySelector('.itemNameText').innerText = combatant.Name;
          trackItemTemp.querySelector('.itemHpText').innerText = combatant.HP;
          trackItemTemp.querySelector('.itemApText').innerText = combatant.AP;
          itemParent.appendChild(trackItemTemp);
      }   
  
  }
  </code></pre>
  <p>I was thinking I could use a for loop to change the ID of the button for each object, and then add an event listener, and go from there, but I'm clueless how to even do this. If someone could point me in the right direction that would be great!</p>