Only 1 data submitted into database (food ordering system) - php

Question

I am new on implementing Ajax on PHP so I need a big help! anyways my problem is I have a 5 column names on my table_menu
table_menu:
menu_id
menu_foodname
menu_price
menu_quantity
menu_image
and inside those column names it has 6 datas.
And I will gonna fetch those datas on my webpage(users.php)
<?php
// users.php
// fetching data
include 'config/initialize.php';
$sql = "SELECT * FROM table_menu";
$res = mysqli_query($con, $sql);
if($res)
{
echo "<table><tr>";
while($row = mysqli_fetch_array($res))
{
echo "<td>";
echo "<div class='horizontalAlign'>";
echo "<form class='form-item' method='post'>";
echo "<img class='img-circle' src='menuImage/".$row['menu_image']."' style='height: 150px; width: 200px;'>";
echo "<input type='hidden' name='menuimage' class='menuimage' value='".$row['menu_image']."'>";
echo "<input type='text' name='menufoodname' class='menufoodname' value='".$row['menu_foodname']."' style='border:none; margin-top: 10px; margin-left: 30px; font-size: 20px;' readonly>";
echo "<div style='font-size: 20px; margin-left: 40px;'>Price:</div> <input type='text' class='menuprice' name='menuprice' value='".$row['menu_price']."' style='border:none; margin-left: 100px; margin-top: -28px; position: absolute; font-size: 20px;' readonly>";
echo "<div style='font-size: 20px;'>Quantity:</div> <input type='number' class='menuquantity' name='menuquantity' style='margin-top: -26px; position: absolute; margin-left: 90px; text-align: center;' value='".$row['menu_quantity']."' min='0' max='100'>";
echo "<br>";
echo "<input type='button' value='Submit order' class='btnaddorder btn btn-lg btn-info' class='btn btn-info'>";
echo "</form>";
echo "</div>";
echo "</td>";
$i++;
if($i == 3)
{
echo "</tr><tr>";
}
} // end of while
echo "</tr></table>";
} // end of variable $i
?> <!-- // end of fetching data -->
and I want the page to be not refresh while the user orders... so I add this ajax script on the bottom of users.php
<script type="text/javascript">
$(document).ready(function() {
$(".btnaddorder").click(function() {
var menuimage = $(".menuimage").val();
var menufoodname = $(".menufoodname").val();
var menuprice = $(".menuprice").val();
var menuquantity = $(".menuquantity").val();
// Returns successful data submission message when the entered information is stored in database.
$.post("addorders.php", {
menuimage1: menuimage,
menufoodname1: menufoodname,
menuprice1: menuprice,
menuquantity1: menuquantity,
}, function(data) {
});
});
});
</script>
Now the problem is when I am clicking the first button on the fetched datas the first one only got inserted and if I am add the second item even the third until fifth item it only display one data on the database which is the first data, why?
heres my addorders.php
<?php
include 'config/initialize.php';
include 'credentials/credentialsForUsers.php';
$menuimage = $_POST['menuimage1'];
$menufoodname = $_POST['menufoodname1'];
$menuprice = $_POST['menuprice1'];
$menuquantity = $_POST['menuquantity1'];
$sql = "INSERT INTO table_orders VALUES('','$username','$email','$menuimage','$menufoodname','$menuprice','$menuquantity')";
$result = mysqli_query($con, $sql);
?>
thank you & sorry for my bad english. hope you understand my problem

Answer 1

To clarify which fields you want to submit you can do the following:
$(".btnaddorder").click(function() {
// here you find closest form tag to the pressed button
var form = $(this).closest('form');
// replace all you values with simple .serialize() function
// this function will use all non-disable fields from the form
$.post("addorders.php", form.serialize(), function(data) { });
});
On the serverside your $_POST will have the same keys as fields on your form.