title: Update items on page with Ajax to database
body: <p>Ok so I want to say I'm sorry first off if this has been asked before. I can't seem to find it in the asked questions section though, and I've spent hours looking for what I need. </p>
  
  <p>So to start off with. I'm pulling rows of data from a table off my database -> Products. Then adding them to the cart. I know how to do this in PHP but I'm new to JavaScript and Ajax. I do have my code working where I can  submit one form to add to the database, but it's not working for any after the first one. </p>
  
  <p>I'll include all my code too, but I just need help figuring out how to add each individual item to the cart. It seems simple to me logically, but I can't figure out the correct way to do this and appreciate any help!</p>
  
  <p>Here is my code for the page showing the database products.</p>
  
  <pre><code>//*script*//
      &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
  
  
                  $("#FormSubmitAddToCart").click(function (e) {
                          e.preventDefault();
                          if($("#qtyArea").val()==='0')
                          {
                              alert("Please enter a quantity!");
                              return false;
                          }
  
                          $("#FormSubmitAddToCart").hide(); //hide submit button
                          $("#LoadingImage").show(); //show loading image
  
                          var id = 'id='+ $("#idArea").val();
                          var qty = 'qty='+ $("#qtyArea").val(); 
                          var myData = id+'&amp;'+qty;
                          //alert(myData);
                          jQuery.ajax({
                          type: "POST", // HTTP method POST or GET
                          url: "response.php", //Where to make Ajax calls
                          dataType:"text", // Data type, HTML, json etc.
                          data:myData, //Form variables
                          success:function(response){
                              $("#responds").append(response);
                              $("#idArea").val(''); //empty text field on successful
                              $("#qtyArea").val(''); //empty text field on successful
                              $("#FormSubmitAddToCart").show(); //show submit button
                              $("#LoadingImage").hide(); //hide loading image
  
                          },
                          error:function (xhr, ajaxOptions, thrownError){
                              $("#FormSubmitAddToCart").show(); //show submit button
                              $("#LoadingImage").hide(); //hide loading image
                              alert(thrownError);
                          }
                          });
                  });
      &lt;/script&gt;
  
  //*selects products from database*//
  &lt;?php
  include_once("config.php");
  
  $results = $mysqli-&gt;query("SELECT * FROM products");
  while($row = $results-&gt;fetch_assoc()) {
      echo '&lt;li id="item_'.$row["id"].'"&gt;
              &lt;div class="del_wrapper"&gt;
                  '.$row["name"].' - $'.$row["price"].'
                  &lt;input type="hidden" id="idArea" value="'.$row["id"].'"&gt;
                  &lt;input type="number" id="qtyArea" value="0"&gt;
                  &lt;button id="FormSubmitAddToCart"&gt;Add to Cart&lt;/button&gt;
              &lt;/div&gt;
          &lt;/li&gt;&lt;br /&gt;';
  }
  
  ?&gt;
  </code></pre>
  
  <p>And my response page is working and posting the first form data to the cart table.</p>
  
  <p>I know I need some kind of loop or way to id what form is being submitted with the button, but not sure how to do this. Any suggestions? And just to let you know, I do secure my stuff after I get it working. Thanks! :D</p>
  
  <hr>
  
  <p>************************ FIXED CODE THAT WORKS BELOW THESE LINES **************************</p>
  
  <hr>
  
  <p>Here is the full update that now works for me. </p>
  
  <p>Script Code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $('[id^=FormSubmitAddToCart]').click(function(){
              // now this is your product id, and now you should
                  var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');
  
              // this is  your quantity
                  var p_qty = $('#qtyArea-'+p_id).val();
  
              // + now you know the product id and quantity, so you should handle the rest
  
                  var myData = 'id='+p_id+'&amp;qty='+p_qty;
  
                  alert(myData);
              //  throw new Error("Something went badly wrong!");
  
                  jQuery.ajax({
                  type: "POST", // HTTP method POST or GET
                  url: "response.php", //Where to make Ajax calls
                  dataType:"text", // Data type, HTML, json etc.
                  data:myData, //Form variables
                  success:function(response){
                      $("#responds").append(response);
                      $("#idArea").val(''); //empty text field on successful
                      $("#qtyArea").val(''); //empty text field on successful
                      $("#FormSubmitAddToCart").show(); //show submit button
                      $("#LoadingImage").hide(); //hide loading image
  
                  },
                  error:function (xhr, ajaxOptions, thrownError){
                      $("#FormSubmitAddToCart").show(); //show submit button
                      $("#LoadingImage").hide(); //hide loading image
                      alert(thrownError);
                  }
                  });
  
              })
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Form Code for submission:</p>
  
  <pre><code>&lt;?php
      include_once("config.php");
  
      $results = $mysqli-&gt;query("SELECT * FROM products");
      while($row = $results-&gt;fetch_assoc()) {
          echo '&lt;li id="item_'.$row["id"].'"&gt;
                  &lt;div class="del_wrapper"&gt;
                      '.$row["name"].' - $'.$row["price"].'
  
                      &lt;input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'"/&gt;
                      &lt;input type="number" id="qtyArea-'.$row["id"].'" value="0"&gt;
                      &lt;button id="FormSubmitAddToCart-'.$row["id"].'"&gt;Add to Cart&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/li&gt;&lt;br /&gt;';
      }
  
  ?&gt;
  </code></pre>
  
  <p>response.php page</p>
  
  <pre><code>&lt;?php
  //include db configuration file
  include_once("config.php");
  
  if(isset($_POST["qty"]) &amp;&amp; ($_POST["qty"] != 0) ) {
      //check $_POST["content_txt"] is not empty
  
      //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH Strip tags, encode special characters.
      $MID = "43";
      $ID = $_POST["id"];
      $QTY = $_POST["qty"];
  
      echo $ID.$QTY;
  
      // Insert sanitize string in record
      //$insert_row = $mysqli-&gt;query("INSERT INTO add_delete_record(content,qty) VALUES('".$contentToSave.",".$QTY."')");
  
      $insert_row = $mysqli-&gt;prepare('INSERT INTO orders(members_id, product_id, quantity) VALUES (?,?,?)');
      $insert_row-&gt;bind_param('iii', $MID, $ID, $QTY);
      $insert_row-&gt;execute();
      $insert_row-&gt;close();
  
      if($insert_row)
      {
           //Record was successfully inserted, respond result back to index page
            $my_id = $mysqli-&gt;insert_id; //Get ID of last inserted row from MySQL
            echo '&lt;li id="item_'.$my_id.'"&gt;';
            echo '&lt;div class="del_wrapper"&gt;&lt;a href="#" class="del_button" id="del-'.$my_id.'"&gt;';
            echo '&lt;img src="images/icon_del.gif" border="0" /&gt;';
            echo '&lt;/a&gt;&lt;/div&gt;';
            echo $ID.'-'.$QTY.'&lt;/li&gt;';
            $mysqli-&gt;close(); //close db connection
  
      }else{
  
          //header('HTTP/1.1 500 '.mysql_error()); //display sql errors.. must not output sql errors in live mode.
          header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
          exit();
      }
  
  }
  ?&gt;
  </code></pre>