title: multiples buttons that share one javascript function
body: <p>I am using a foreach loop to load data from mysql table using php. </p>
  
  <p>Now I have a button with a javascript function next to each foreeach set of data to display the data. </p>
  
  <p>The problem is, the button only works on the very first fetched data in the foreach loop. I am not sure what the problem is?</p>
  
  <p>Here is my code <a href="https://jsfiddle.net/7qL2osp5/" rel="nofollow noreferrer">https://jsfiddle.net/7qL2osp5/</a> </p>
  
  <p>I am using this script btw</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    function bigger(){
          document.getElementById("approvals-data-box").style.width="95%";
          document.getElementById("actual-data").style.display="block";
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks</p>