title: Differentiate multiple form on AJAX
body: <p>I have a php page with multiple form inside.</p>
  
  <pre><code>&lt;form id="form_&lt;?php echo $rowProduct['Product_ID'];?&gt;"&gt;
      &lt;a id="wh_&lt;?php echo $rowProduct['Product_ID'];?&gt;"&gt;&lt;i class="fal fa-heart"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;input type="hidden" name="PID_&lt;?php echo $rowProduct['Product_ID'];?&gt;" value="&lt;?php echo $rowProduct['Product_ID'];?&gt;"&gt;
      &lt;input type="hidden" name="mail_&lt;?php echo $rowProduct['Product_ID'];?&gt;" value="&lt;?php echo $rowProduct['Mail'];?&gt;"&gt;
  </code></pre>
  
  <p></p>
  
  <p>Those form generate from looping through all data on MySQL.
  Every form and input has their unique id by Product_ID.</p>
  
  <p>Below is ajax script to submit data to database.</p>
  
  <pre><code>&lt;script&gt;
      $('[id^=wh_]').click(function(e) {
          $.ajax({
              url: 'submit.php',
              type: 'POST',
              data: $("[id^=form_]").serialize(),
              success: function(data) {
                  alert('Success add item');
              }
          });
          e.preventDefault();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Currently this code successfull to insert data to MySql, but the submited data always be the last form only whatever which submit button clicked.
  I'm using AJAX to submit those forms to achieve a form submit without refreshing the php page.</p>
  
  <p>Much appreciate for every help.</p>