how to get each input value on form submit - php

Question

I'm building a friend request system,But my problem is how to get each user value which is the id in my code,But with the code i have so far it only get and return only the first user id even when you try to add other friend it only get the first user id in my database please someone should fix my code.
users.php
<div class="users_b">
<?php
include 'db.php';
$sq = "select * from alert_users_account";
$query = mysqli_query($con,$sq);
while($row = mysqli_fetch_assoc($query)){
?>
<div class="user_dis_p">
<div id="user_img"><a href="alert_profile.php?id=<?php echo $row['id']?>"><img src="alert<?php echo $row['photo']; ?>">
</a></div> <div id="user_fs">
<a href="alert_profile.php?id=<?php echo $row['id']?>">
<?php echo $row['firstname']." "." "." "." ".$row['surname'];?></a>
<form id="f_form">
<input type="text" name="friend_id" id="friend_id" value="<?php echo $row['id']?>">
<input type="submit" id="add_user" value="ADD" onclick="return request()">
</form>
</div><?php }?>
</div>
</div>
<div id="msg"></div>
<script>
function request(){
var frnd = document.getElementById("friend_id").value;
alert(frnd);
$.ajax({
type:'get',
url:'user_request.php',
data:{
frnd:frnd
},
cache:false,
success: function(message){
$("#msg").html(message);
}
});
return false;
}
</script>
user_request.php
<?php
session_start();
include 'db.php';
if(isset($_SESSION['email'])){
$eml = $_SESSION['email'];
$sq = $con->prepare("select id from alert_users_account where email_phone=?");
$sq->bind_param('s',$eml);
$sq->execute();
$res = $sq->get_result();
$ro = $res->fetch_assoc();
$user = $ro['id'];
if($_GET['frnd']){
echo $id = $_GET['frnd'];
$sql = $con->prepare("select * from alert_users_account where id=?");
$sql->bind_param('i',$id);
$sql->execute();
$result = $sql->get_result();
$row = $result->fetch_assoc();
$frnd = $row['id'];
$sql = $con->prepare("insert into friend (user_id,friend_id)values (?,?)");
$sql->bind_param('ss',$user,$frnd);
$sql->execute();
$sql->close();
echo "successfully inserted!";
}else{
echo 'error';
}
}else{
echo 'you cant add a friend!';
}
?>
I also try to use post method but both still give the same feedback

Answer 1

It appears you will need to rewrite certain aspects of your code. Here is my explanation:
You're using a while loop to show many different form elements with the id of "friend_id".
By using document.getElementById("friend_id"), you're only able to get one of those input elements that has the id of "friend_id".
You might use class="friend_id" on your input elements and go from there.