多个共享一个javascript函数的按钮

Question

I am using a foreach loop to load data from mysql table using php.

Now I have a button with a javascript function next to each foreeach set of data to display the data.

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?

Here is my code https://jsfiddle.net/7qL2osp5/

I am using this script btw

<script type="text/javascript">
  function bigger(){
        document.getElementById("approvals-data-box").style.width="95%";
        document.getElementById("actual-data").style.display="block";
  }

</script>

Thanks

Answer 1

id is used for one specific element. You can only have one element with the same id.

What you need to do is give them all different ids and then pass in the id to the function. You also need classes for the styling.

IDs are for specific elements. Classes are for element types.

Here's a working version:

https://jsfiddle.net/7qL2osp5/1/

In CSS, you use the . for classes and the # for ids. This may be a good time to try to learn jQuery since you're just starting out.