Problem with sending data to server with ajax

Question

I've written a code that creates a table from database in HTML and I want to have delete and confirm button on each row. I put the entire row in <form method="post"> attribute. In the JavaScript File I read email's value and sent it to server using ajax and server does the operation. the Problem is when i want to delete a row or confirm it using each row's button, it only applies to the first row even if i click another row's button. I Used document.getElementById('email') but it always return first row. here is my html code:

<table id="example1" class="table table-bordered table-striped">
   <thead>
   <tr>
       <th>نام کاربر</th>
       <th>ایمیل</th>
       <th>تایید</th>
   </tr>
   </thead>
   <tbody>
    <?php
    while ($users = mysqli_fetch_assoc($result_user)) {
    ?>
    <tr>
       <form name="ajax-demo" id="ajax-demo" method="get">
           <td><?php echo $users['name']?></td>
           <td><?php echo $users['email']?></td>
                <input id="email" type="hidden" name="email" value="<?php echo $users['email']?>">
            <td>
                <div class="btn-group">
                  <button onclick="confirmUser()" id="btnConfirm" type="submit" class="btn btn-success btn-flat">
                      تایید
                  </button>
                  <button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                  <li>
                     <a onclick="deleteUser()" id="btnDelete">حذف</a>
                  </li>
                  </ul>
                </div>
             </td>
        </form>
     </tr>
    <?php }?>
    </tbody>
</table>

and javaScript code:

<script>
    function confirmUser() {
        var email = document.getElementById("email").value;
        var xhr;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE 8 and older
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var data = "email=" + email;
        xhr.open("POST", "confirm_user.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
        xhr.onreadystatechange = display_data;
        function display_data() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    document.getElementById("txtHint").innerHTML = xhr.responseText;
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
    }
    function deleteUser() {
        var email = document.getElementById("email").value;
        var xhr;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE 8 and older
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var data = "email=" + email;
        xhr.open("POST", "confirm_user_delete.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
        xhr.onreadystatechange = display_data;
        function display_data() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    document.getElementById("txtHint").innerHTML = xhr.responseText;
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
    }
</script>

and at last my confirm_user.php code:

<?php
$conn = mysqli_connect('localhost', 'root', 'root', 'my_scheme');
if (!$conn) {
    die('Connection failed ' . mysqli_error($conn));
}
if (isset($_POST['email'])) {
    $email_user = $_POST['email'];
    $sql = "UPDATE my_scheme.tbl_user SET active='true' WHERE email='".$email_user."'";
    if (mysqli_query($conn, $sql)) {
        echo '<h5 class="headline text-green">کاربر با موفقیت تایید شد!</h5>';
    }else {
        echo "Error: ". mysqli_error($conn);
    }
    exit();
}
else {
    echo "failed";
}

confirm_user_delete.php code is like the previous code. please help me to fix this. thank you

Answer 1

If I understood your problem right. You have database enteries that creates table rows from the results from database. But even if you click the second element it is always getting the id of the first email from the table row.

Reason: You can simply do it like this

    <?php
$email = 'myemail.com';
?>

<button onclick="confirmUser('<?php echo $email; ?>')"class="btn btn-success btn-flat"> Delete Me </button>

<script>
function confirmUser(email)
{
    console.log("The email to delete is: " + email);
}
</script>

Answer 2

<button onclick="confirmUser(this)" data-email="<?php echo $users['email']?>" id="btnConfirm" type="submit" class="btn btn-success btn-flat">تایید</button>

And in js function:

function confirmUser(this) {
        var email = this.getAttribute("email");
        var xhr;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE 8 and older
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var data = "email=" + email;
        xhr.open("POST", "confirm_user.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
        xhr.onreadystatechange = display_data;
        function display_data() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    document.getElementById("txtHint").innerHTML = xhr.responseText;
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
    }

Do it same for delete.