title: Get the next child element in javascript whose innerHTML is dynamic value
body: <p>I have a parent element with button &amp; a child div in php code.The child div has innerHTML to be assigned dynamically and is also being displayed dynamically in output.</p>
  
  <p>Php code:</p>
  
  <pre><code>$loc = $sdid;  /*get value according to some loop condition thus this value 
                 changes as loop iterates*/        
  echo '&lt;div id="parent"&gt;
        &lt;input type="button" id="investbutton" value="Invest" onclick="InputInvest()"&gt; 
        &lt;div id="child"&gt;'.$loc.'&lt;/div&gt; 
        &lt;/div&gt;';
  </code></pre>
  
  <p>Now the child has dynamic value of $loc variable.</p>
  
  <p>On clicking the button,InputInvest() is called:</p>
  
  <pre><code>function InputInvest()
  {
     var x=0;
     x= document.getElementById("investbutton").nextSibling.innerHTML;
  
     document.write(x);   
  }
  </code></pre>
  
  <p>But the outpt is showing 'undefined'
  How to solve this error?</p>
  
  <p><strong>Edit:</strong>
  Solution to previous problem:</p>
  
  <pre><code>x = document.getElementById("investbutton").nextElementSibling.innerHTML;
  </code></pre>
  
  <p>Problem 2:
  But now the output only the first for loop condition value..I think javascript is not able to reassign x as the values are definitely iterating properly...or may be the input tag is not able to take values dynamically.
  Any new suggestions on this is welcomed!</p>