Using .each() to make multiple posts

Using .each() to make multiple posts

Hey all,

I am working on a form that has multiple divs that have similar inputs. These are dynamically generated but have a structure similar to this :

  1. <div class = "item">
  2.       <input name = "name" class = "name" type = "text" />
  3.        <input name = "price" class = "price" type = "text" />
  4. </div>

  6. <div class = "item">
  7.       <input name = "name" class = "name" type = "text" />
  8.        <input name = "price" class = "price" type = "text" />
  9. </div>

  11. <div class = "item">
  12.       <input name = "name" class = "name" type = "text" />
  13.        <input name = "price" class = "price" type = "text" />
  14. </div>
  15. <input type = "submit" id = "submit" value = "Save" />

Now what I would like to do is do post to a php file for each "item" div and use the values from their children, I want this to happen when the submit button is pushed. Something like this :
  1. $("#submit").click(function(){
  2.       //For each item div
  3.       $(".item").each(function(){
  4.             var data = "name="+$(this).find(".name").val(); // add the name to the query string
  5.             data += "&price"+$(this).find(".price").val(); // add the price to the string
  6.             $.post('submit.php',data,function(data){
  7.                   //do something with the data if I want to
  8.             }
  9.       });
  10. });
My questions are is it even possible to use .each like this? If not is there another way to do this? Thanks much for any advice or suggestions, it is very much appreciated.