The given snippet has a javascript function and a table in which I want to show content of each row using a modal. 

But the problem is when I am using alert in middle for debugging for any number of row when I click in view button it always shows the first value of `m_id` but it must show the corresponding values. `$v` object is returning expected data only no problem in that.

I need help since I am just a beginner in ajax.

```html
<script type="text/javascript">
  function view_message(){
    //alert("aa gyaksjhfjxvhk");
    var m_id = document.getElementById('m_id').value;
    var c_name = document.getElementById('c_name').value;
    var message = document.getElementById('message').value;

    alert(m_id);
    //alert(loc);

    $.ajax({
      type: "POST",
      url: "view_message.php",
      data:
      { 'm_id' :m_id,
        'c_name' : c_name,
        'message' : message
      },
      success: function(data){
      //  alert("success");

         $(".message_container").html(data);

      }
    });

  }

</script>

foreach($v_message as $v)
              {         
                 echo '<tr>';
                  echo '<td>'.$v->time.'</td>';
                  echo '<td>'.$v->c_name.'</td>';

                   echo '<input id="m_id" name="m_id" value="'.$v->id.'" hidden />';
                   echo '<input id="c_name" name="c_name" value="'.$v->c_name.'" hidden />';
                   echo '<input id="message" name="message" value="'.$v->message.'" hidden />';

                  echo '<td data-toggle="modal" data-target="#myModal">';

                  echo '  <input type="button" id="view" onclick="view_message()" value="view"></input>';
                echo '</td>';

                  echo '<td data-toggle="modal" data-target="#myModal1">

                 <a href="#"><span>Delete</span></a>';

                  echo '</td>';

                  echo '</tr>';  ?>

                  <div id="message_container">
                  </div>
```