如何为触发JavaScript函数的按钮使用php foreach循环

Question

I am using js and php to build an app. I've used a foreach loop in php to create buttons for each row fetched from mysql table. Each button has a unique value (row id).

If someone clicks on of the buttons (each with unique id), there will be a total likes count that holds how many times a button is clicked.

If we have three buttons, and button 1 is clicked, then total likes will be increase by 1. if the same button is clicked again, then the value would decrease by 1.

However, if two buttons of different values are clicked, the total likes add.

When using js, I cant get each button id to pass to the js function loaded from the foreach loop. only the last button value loads to the js function.

Here is what i've tried. the js works but it doesnt apply to each button of the foreach loop.

My Code

        <?php foreach($values as $value){ 
        $value['button_id'];

        <!-- button --->
        <button id="button"    
           class="button-<?= $value['button_id']; ?>"    
           value="<?= $value['button_id']; ?>"  
           onclick="showUser(this.value)" >LIKE
        </button>
        <!-- button --->

        } ?>


        <script>
            var i = parseInt(document.getElementById('button').value, 10);
            var x = i;
            function showUser(this.value) {
            /// changing value //
            if (x == i){
            i++;
            document.getElementById('button').value = i;

            }
            else {

             i = x;
             document.getElementById('button').value = i;

            }   
          }
        </script>           

Here is an illustration explaining what I mean

Thanks in advance

Answer 1

 <script>
        var likes = new Array();

        function calc(value) {
            if(likes[value] == 0 || !likes[value]) {
                likes[value]=1;
            } else {
                likes[value]=0;
            }

        var sum=0;
        for(i=0; i<likes.length; i++) {

            if(likes[i]==1){ sum ++ }
        }

        document.getElementById("total").innerHTML = sum;
      }

    </script>  


    <div id=total>0 </div>
 <?php 
    $values = [1,2,3]; //here you can generate values

 foreach($values as $value){ 


    ?>
    <button id="button"    
       class="button-<?php echo $value; ?>"    
       value="<?php echo $value; ?>"  
       onclick="calc(<?php echo $value; ?>)" >LIKE
    </button>
    <?php

    } ?>

Answer 2

    <script>
        var i = parseInt(document.getElementById('button').value, 10);
        var x = i;
        function showUser(this.value) {
        /// changing value //
        if (x == i){
        i++;
        document.getElementById('button').value = i;

        }
        else {

         i = x;
         document.getElementById('button').value = i;

        }   
      }
    </script>