如何使用javascript或ajax更新php中购物车中的每个项目

Question

i have a cart page with minus and plus button to update the quantity. i have used jquery for Functioning of that plus minus button. now the problem is it only works on the first item. it doesn't works on other items

<div class="row1 clearfix"> 
    <?php $sql="select * from `add_cart` where user_id='$u_id'";
        $i=0;
        $query=mysqli_query($conn,$sql);
        //$row=mysqli_fetch_assoc($query);
        while($row=mysqli_fetch_assoc($query))
        {
        $b_id=$row['book_id'];
        $i++;
    ?>  
    <div id="cart_form">
        <form  method="post" action="move_wish_list.php?action=add&id=<?php echo $b_id; ?>" >
    <div class="span4">
       <table width="100%" border="0" cellpadding="0">
          <!-- this will store the value in name and we can use it to store the variable to wish list-->
          <input type="hidden" name="u_id" id="uid_<?php echo $i;?>" value="<?php echo $row['user_id'];?>"/>
           <input type="hidden" name="u_name" id="fname_<?php echo $i;?>" value="<?php echo $row['user_name'];?>"/>
           <input type="hidden" name="bookid" id="bookid_<?php echo $i;?>" value="<?php echo $row['book_id'];?>"/>
           <input type="hidden" name="nm" id="nm_<?php echo $i;?>" value="<?php echo $row['book_name'];?>"/>
           <input type="hidden" name="edtn" id="edtn_<?php echo $i;?>" value="<?php echo $row['book_edition'];?>"/>
           <input type="hidden" name="ofr" id="ofr_<?php echo $i;?>" value="<?php echo $row['book_offer'];?>"/>
           <input type="hidden" name="qty" id="qty_<?php echo $i;?>" value="<?php echo $row['book_quantity'];?>"/>
           <input type="hidden" name="bimg" id="bimg_<?php echo $i;?>" value="<?php echo $row['book_image'];?>"/>
           <input type="hidden" name="rat" id="rat_<?php echo $i;?>" value="<?php echo $row['book_rating'];?>"/>
           <input type="hidden" name="price" id="price_<?php echo $i;?>" value="<?php echo $row['book_price'];?>"/>
           <input type="hidden" name="mode" id="mode_<?php echo $i;?>" value="<?php echo $row['book_delivery_mode'];?>"/>
           <input type="hidden" name="avl" id="avl_<?php echo $i;?>" value="<?php echo $row['book_availability'];?>"/>
           <input type="hidden" name="pin" id="pin_<?php echo $i;?>" value="<?php echo $row['delivery_pin'];?>"/>
             <tbody>
            <tr>
            <td width="46%" height="40" align="center"><strong>ITEM</strong></td>
             </tr>
             <tr>
            <td><img src="control/Book_Images/<?php echo $row['book_image']; ?>" width="100" height="100"/></td>
           <td width="54%" align="left" valign="middle"><?php echo $row['book_name']; ?></td>
                </tr>
               </tbody>
            </table>

          </div>
          <div class="span2">
            <table width="100%" border="0" cellpadding="0">
              <tbody>
            <tr>
                  <td width="49%" height="40"><strong>QTY</strong></td>
                  <input type="hidden" name="u_id" id="uid_<?php echo $i;?>" value="<?php echo $row['user_id'];?>"/>

                </tr>
              <td width="51%" height="40"><strong>


                <br>
                <input type="submit" name="save" value="-" id="minus_<?php echo $i;?>">
                <input name="qty" type="text" value="<?php echo $row['book_quantity'];?>" style="width:30%;" id="number_<?php echo $i;?>">
                <input type="hidden" name="bookid" id="bookid_<?php echo $i;?>" value="<?php echo $row['book_id'];?>"/>
                <input type="submit"  name="save" value="+" id="plus_<?php echo $i;?>">

                  <!--p><button type="submit" name="save" id="save"> save</button></p-->
                  <p><?php echo $row['book_availability']; ?></p>



                  <img src="images/rating-img.png"/>

                  </strong></td>

                  </tbody>
            </table>
          </div>
          <div class="span2">
            <table width="100%" border="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="49%" height="40"><strong>PRICE</strong></td>
                  <td width="49%" height="40"><strong>Edition</strong></td>

                  </tr>
                <tr>
              <td width="51%" height="40"><?php echo $row['book_price'];?>

            <input type="hidden" name="book_price" value="<?php echo  @$b_price.=$row['book_price'].",   ";?> " />
              </td>
              <br>
           <td width="51%" height="40"><?php echo $row['book_edition']; ?>
        <input type="hidden" name="book_edition" value="<?php echo @$b_edition.=$row['book_edition'].",   ";?>" />

             <br>

                  </td> </tr><td width="49%" height="40"><strong>Delivery Pin :</strong></td>
                  <td width="49%" height="40">
                    <input type="hidden" name="pincode"value="<?php echo $row['delivery_pin']; ?>" />
                  <strong><?php echo $row['delivery_pin']; ?></strong></td>
                  </tbody>
            </table>
          </div>
          <div class="span2">
            <table width="100%" border="0" cellpadding="0">
              <tbody>               
                <tr>
                  <td width="49%" height="40"><strong>DELIVERY DETAILS</strong></td>
                </tr>
                <tr>
              <td width="51%" height="40"><strong>Rs. 40</strong>
              <input type="hidden" name="del_mode" 
              value="<?php echo @$book_delivery_mode.=$row['book_delivery_mode'].";  "; ?>"/>

                <p><?php echo $row['book_delivery_mode']; ?></p>
                <p>Delivery in 2 days, Fri</p></td>
                </tr>
                  </tbody>
            </table>
          </div>
          <div class="span2">
            <table width="100%" border="0" cellpadding="0">
              <tbody>
                <tr>
                  <td width="49%" height="40"><strong>SUBTOTAL</strong></td>
                </tr>
                <tr>
              <td width="51%"  height="40">
              <?php echo $subtotal=$row['book_price'] * $row['book_quantity']; 

              ?>
              </td>
        </tr>
       </tbody>
    </table>
          </div>
          <div class="span12">
         <table width="100%" border="0" cellpadding="0">
  <tbody>
  <tr>
       <td width="25%" align="center">
        <button type="submit"   style="color:#f9f9f9;" name="add" class="btn 
    btn-success" >Move To Wishlist </button> 


       <!--<a href="#">Move To Wishlis</a>-->

     <a class="btn btn-danger" href="del_cart_item.php?delete_id=<?php echo $b_id;?>" title="click for delete" onclick="return confirm('sure to delete cart item ?')"><span class="glyphicon glyphicon-remove-circle"></span> Remove</a></td>

     </tr>  
    </tbody>
  </table>          
          </div> 
          </form>
          </div>
           <?php }?>

javascript to update the quantity number

<script type="text/javascript">
var id_help_arr = this.id.split('_');
var input = document.getElementById("number_"+id_help_arr[1]);

function minus() {
  var num = +input.value; //+ for convert from string to number
  num--;
  input.value = num;
}

function plus() {
  var num = +input.value; //+ for convert from string to number
  num++;
  input.value = num;
}

document.getElementById("minus"+id_help_arr[1]).onclick = minus;
document.getElementById("plus"+id_help_arr[1]).onclick = plus;
</script>

now the code for move_wish_list.php

<?php
include('control/db.php');
session_start();

$idd=$_SESSION['user_id'];
$bkid=$_GET['id'];
if(isset($_POST['save']))
{
$a=$_POST['qty'];
$b=mysqli_query($conn,"UPDATE add_cart set book_quantity='$a' where 
book_id='$bkid' AND user_id='$idd' ");
header('location:cart.php');
}else{
$u_id = $_POST['u_id'];
$u_name = $_POST['u_name'];
$bid=$_POST['bookid'];
$img=$_POST['bimg'];
$name=$_POST['nm'];
$rat=$_POST['rat'];
$price=$_POST['price'];
$edi=$_POST['edtn'];
$offer=$_POST['ofr'];
$pincode = array('110011','110056','110045','110034');
if(!empty($_POST['pin'])){
if(in_array($_POST['pin'],$pincode)){
$pin=$_POST['pin'];
}else{
@$err="Invalid Pin Code";
return false;
}
}

$mode=$_POST['mode'];
$avl=$_POST['avl'];
if(!empty($_POST['qty'])){
$qty=$_POST['qty'];
}
$sql1="SELECT * FROM `add_wishlist` WHERE `book_id`='$bkid' AND ` 
user_id`='$idd'" ;
$r=mysqli_query($conn,$sql1);
$ra=mysqli_num_rows($r);
if($ra>0){
$_SESSION['mess']="<font color='red'>Product already added!!</font>";
header('location:cart.php');
}else
{
$res=mysqli_query($conn,"INSERT INTO 
`add_wishlist`(`user_id`,`user_name`,`book_id`, `book_name`, `book_edition`, 
`book_offer`, `book_quantity`, `book_image`, `book_rating`, `book_price`, 
`book_delivery_mode`, `book_availability`, `delivery_pin`, 
`current_details`) 


VALUES('$u_id','$u_name','$bid','$name','$edi','$offer',
'$qty','$img','$rat','$price','$mode','$avl','$pin',now())");
if($res==true){
$sql1="DELETE FROM `add_cart` WHERE `book_id`='$bkid' AND
`user_id`='$idd'";
mysqli_query($conn,$sql1);
}
$_SESSION['mess']="<font color='blue'>Your Product added 
Successfully</font>";
header('location:wish-list.php');
}
}
?>
i want that plus minus button to work on every item. any idea will be appreciated 

Answer 1

I haven't studied the code very thoroughly, but this part might be the culprit: var input = document.getElementById("number"); . You are populating the items in a while loop, but have fixed "number" id. You shouldn't have two same ids on the page. Ids ought to be unique.

What you can do is have an id iterator in the php loop

$i = 0;
while($row=mysqli_fetch_assoc($query))
{
    $b_id=$row['book_id'];
    $i++;
?> 

...

<!-- Do this id change for every input -->
<input type="hidden" name="u_id" id="uid_<?php echo $i;?>" value="<?php echo $row['user_id'];?>"/>

Of course the javascript needs to be modified too. Instead of assigning the onclick through id you would acquire all the minus/plus elements via class or name (because the id has to be unique). Then for each of them the minus/plus onclick would do:

var id_help_arr = this.id.split('_');
var input = document.getElementById("number_"+id_help_arr[1]);

---

Edit. Based on updated code your javascript should implement this:

<script type="text/javascript">
var elements = document.getElementsByName('save');
for(var i in elements) {
    elements[i].onclick = function() {
        var id_help_arr = this.id.split('_');
        var type = id_help_arr[0];
        var input = document.getElementById("number_"+id_help_arr[1]);
        var num = +input.value;
        if(type == 'plus') {
            num++;
        }
        else {
            num--;
        }
        input.value = num;
    }
}
</script>

Instead of minus/plus functions, I used only one. It decides whether to increment/decrement based on the input name. This function is added to all the save inputs. In your original code you were assigning the minus/plus functions to first found element only.