title: Jquery Multiple Forms
body: <p>I'm new to JQuery and I can't believe this isn't possible...</p>
  
  <p>I have multiple HTML forms which are dynamically created. I'm using JQuery to capture the data from the forms but when I submit the form all I can access is the data from the last form.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>for($x=0; $x&lt;10; $x++){
  
       ?&gt;
       &lt;form method="POST" id="formid&lt;? echo $x; ?&gt;"&gt;
        &lt;textarea name="notes_text"&gt;&lt;? echo $row[2]; ?&gt;&lt;/textarea&gt;&lt;/td&gt;
        &lt;input type="hidden" value="&lt;? echo $row[0]; ?&gt;" name="notes_id" /&gt;
        &lt;input type="image" src="/images/edit-small.png" id="update-notes-submit" class="submit-img-sml"/&gt;            
       &lt;/form&gt;
       &lt;?
  
  }
  </code></pre>
  
  <p>and the jQuery:</p>
  
  <pre><code>$("form").submit(function(){
  
       var form_id = $(this).closest("form").attr('id');  
       alert(form_id);
  
       var notes_id=$('#formid1 input[name=notes_id]').val();
       var notes_text=$('#formid1 textarea[name=notes_text]').val();
  
  }
  </code></pre>
  
  <p>The alert gives me the correct formid so that works.</p>
  
  <p>If I alert the notes_id or notes_text variables I get 'undefined'.</p>
  
  <p>I have tried:</p>
  
  <pre><code>var notes_id=$('#formid1 input[name=notes_id]').val();
  = undefined
  
  var notes_id=$('#formid2 input[name=notes_id]').val();
  = undefined
  
  var notes_id=$('input[name=notes_id]').val();
  = data from the last form that appears in my script
  </code></pre>
  
  <p>How do I specify the form and the variable. I can't believe this is so difficult to achieve, perhaps this is not possible with JQuery and if so it's a shocking limitation.</p>