title: How to assign a value of an element created with ajax to a hidden form field?
body: <p>There's a div with a button. When you click the button a form appears. The div's id then gets assigned to a hidden field of the form. This works for the divs that are on the page when the page is loaded. It doesn't work for divs that are created by ajax after the page is loaded.</p>
  
  <pre><code>&lt;div class=\"maincircle\"&gt;
      &lt;div class=\"textcircle\" data-id=\"$name\" onclick=\"displayLevel3('$name');\"&gt;". $row['name'] ."&lt;/div&gt;
      &lt;button class=\"add1\" id=\"$name\" onclick=\"toggle_visibility('addleaf');\"&gt;&lt;/button&gt;
      &lt;button class=\"add2\" data-id=\"$name\" onclick=\"toggle_visibility('addsibling');\"&gt;&lt;/button&gt;
      &lt;button class = \"delete\" data-id= \"$name\"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After clicking 'textcircle', ajax displays more divs with the same layout:</p>
  
  <pre><code>    $.ajax( { type : 'POST',
        data : {"node" : val},
        url  : 'displaylevel3.php',
        success: function ( data ) {
          $('#level3').html(data);
        },
        error: function ( xhr ) {
          alert( "error" );
        }
      });
  
  }
  </code></pre>
  
  <p>The following javascript doesn't work for these div's buttons created by ajax:</p>
  
  <pre><code>var buttons = document.querySelectorAll('button');
  
  for (var i=0; i&lt;buttons.length; ++i) {
    buttons[i].addEventListener('click', clickFunc);
  }
  
  function clickFunc() {
    var id = this.id; 
    document.getElementById('parent').value = id;
    document.getElementById('sibling').value = id;
  }
  </code></pre>
  
  <p>How to assign the value of a button created with ajax to a hidden form field?</p>