title: how to change dynamically created div's background with on click JavaScript?
body: <p>i'm adding and removing div's from the 'main' tag using the two buttons i created. i want to change each of the div's backgroud color on click but nothing works....why is that??</p>
  
  <p>this is my code</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;header&gt;
          &lt;/header&gt;
  
          &lt;div id="buttonscontainer"&gt;
              &lt;button class="button" id="add"&gt;+&lt;/button&gt;  
              &lt;button class="button" id="remove"&gt;-&lt;/button&gt;   
          &lt;/div&gt;
  
          &lt;main id="main"&gt;
          &lt;/main&gt;
      &lt;/div&gt;      
  &lt;/body&gt;
  </code></pre>
  
  <p>script:</p>
  
  <pre><code>window.onload=function(){
      for(var i=0;i&lt;6;i++){
              var rectangle = '&lt;div class="rect"&gt;&lt;/div&gt;';
              document.getElementById("main").innerHTML += rectangle;
          }
      document.getElementById("add").onclick = addRect;
      document.getElementById("remove").onclick = removeRect;
      }
  
  /*defines the behaviour of the addRect onclick*/
   function addRect(){
       var rectangle = '&lt;div class="rect"&gt;&lt;/div&gt;';
       document.getElementById("main").innerHTML += rectangle;
   }
  
   /*defines the behaviour of the removeRect onclick*/
   function removeRect(){
       var rectangle = '&lt;div class="rect"&gt;&lt;/div&gt;';
       document.getElementById("main").lastChild.remove();
   }
  </code></pre>