PHP回显按钮仅返回javascript中最后一个回显按钮的值

Question

I have a problem defining var for button value that's dynamic. It works in php, it does not work in my javascript.

Lets say I have 3 php-echoed buttons with values 1, 2 and 3 No matter which I click, it will return value 3, even for buttons that clearly have value 1 or 2. Why? Can't figure it out.

As if javascript only gets the highest or the last value of a button. I'm new to javascript so my knowledge is really small on this.

<script type='text/javascript'>
    function myFunction() {
        var msg_id = document.getElementById('like').value;
        var dataString = 'msg_id=' + msg_id;
            $.ajax({
                type: 'POST',
                url: 'ajaxjs.php',
                data: dataString,
                cache: false,
                success: function(html) {
                alert(html);
                }
            });
    }
</script>

then I have php-echoed form

while($row = mysql_fetch_array($msg_check)) {
    $msgid = $row['id'];
    echo "
    <form method='POST'>
    <input id='like' onclick='myFunction()' type='button' value='$msgid'>
    </form>

external ajaxjs.php

$msgid = $_POST['msg_id'];
echo $msgid;

Answer 1

Try this :

  while($row = mysql_fetch_array($msg_check)) {
        $msgid = $row['id'];
        echo "<form method='POST'>
        <input data-id ="$msgid"  onclick='return myFunction(this)' type='button' value='$msgid'>
        </form>
  }

Ajax :

 <script type='text/javascript'>
         function myFunction(obj) {
           var element_id = $(obj).data('id');
            var msg_id = $(obj).val();
            var dataString = 'msg_id=' + msg_id;
            console.log(dataString ); //see in console
           $.ajax({
            type: 'POST',
            url: 'ajaxjs.php',
            data: dataString,
            cache: false,
            success: function(html) {
               alert(html);
           }
        });
     }
  </script>