javascript - How to overcome of passing single static value to the function? -

i'm displaying many buttons number of rows in query. every row has it's own names & properties. when click on of buttons, should pass particular value function. but, when tried following code, passes first value if click on buttons.

<?php   while ($rec = mysql_fetch_array($query)) {           echo "<figure>";         echo "<button onclick='change()' title='".$rec["username"]."' class='fa fa-user' id='mybutton1' value='".$rec["username"]."' style='font-size:100px;color:red'></button>";         echo "<figcaption>".$rec["username"]."</figcaption>";         echo "</figure>";         //echo "</a>";     } ?>  <script type="text/javascript"> function change() {        var elem = document.getelementbyid("mybutton1");     alert(elem.value);         // sql query , display results in proper table <?php echo "<table><tr><td>".elem.value."</td></tr></table>"; ?>    }   </script>   

how make passing dynamic values (clicking upon buttons, should pass it's corresponding value) ?

<?php while ($rec = mysql_fetch_array($query)) {         echo "<figure>";         echo "<button onclick='change(this.value)' title='".$rec["username"]."' class='fa fa-user' id='mybutton1' value='".$rec["username"]."' style='font-size:100px;color:red'></button>";         echo "<figcaption>".$rec["username"]."</figcaption>";         echo "</figure>";         //echo "</a>";     } ?>  <script type="text/javascript"> function change(button_val) {     alert(button_val);     // sql query , display results in proper table <?php echo "<table><tr><td>".button_val."</td></tr></table>"; ?> } </script>