title: class not applying to all html elements in reactjs after adding new data
body: <pre><code>    import React from 'react';
      import { CodeGenerator } from '@babel/generator';
  
      class Test extends React.Component {
          constructor(props){
              super(props);
              this.state = {
                  data:[{"type": "Beverages", "sub_types": ["Water", "Coffee"]}]
              }
          }
  
          componentDidMount(){
              let toggler = document.getElementsByClassName("caret");
              for (let i = 0; i &lt; toggler.length; i++) {
              toggler[i].addEventListener("click", function() {
                  this.parentElement.querySelector(".nested").classList.toggle("active");
                  this.classList.toggle("caret-down");
              });
              }
          }
  
          callAgain = () =&gt; {
              let toggler = document.getElementsByClassName("caret");
              for (let i = 0; i &lt; toggler.length; i++) {
                  toggler[i].addEventListener("click", function() {
                      this.parentElement.querySelector(".nested").classList.toggle("active");
                      this.classList.toggle("caret-down");
                  });
              }
          }
  
          appendSecond = () =&gt; {
              this.setState(previousState =&gt; ({
                  data: [...previousState.data,  {"type": "Beveragee2", "sub_types": ["Water", "Coffee"]}]
              }), () =&gt; this.callAgain());
  
          }
  
          render(){
              return (
                  &lt;div style={{ margin:'1cm' }}&gt;
                      &lt;ul id="myUL"&gt;
                      {
                          this.state.data.map((d, index) =&gt; (
                              &lt;li&gt;&lt;span class="caret"&gt;{d.type}&lt;/span&gt;
                              &lt;ul class="nested"&gt;
                              {
                                  d.sub_types.map(sub =&gt; (
                                      &lt;li&gt;{sub}&lt;/li&gt;
                                  ))
                              }
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          ))
                      }
                      &lt;/ul&gt;
                      &lt;button type="button" onClick={this.appendSecond}&gt;button&lt;/button&gt;
                  &lt;/div&gt;
              )
          }
      }
  
      export default Test;
  </code></pre>
  
  <p>Hi, here i have shared my Code.</p>
  
  <p>I am just created one tree view using html/css and it is working firsttime when i am clicking the caret icon and it toggles.</p>
  
  <p>But when i am appending one more tree on to my data it is not working the previous tree but, working the last inserted tree.</p>
  
  <p>Please run this code for better understanding. I tried to explain but, not sure you guys got or not what i am trying to say.</p>
  
  <p>Please have a  look.</p>