Submit form data within a table via Ajax always sends first row PHP -

this table has many rows each few columns completed own mini-form. variable $y auto-incremented , identifies row should submitted. old form pre-ajax looked this:

<tr>     <form id='form$y' action=".htmlspecialchars($_server["php_self"])." method='post''/>     <input type='hidden' form='form$y' name='id' value='$id' />     <td>         <input style='height:18px' form='form$y' type='date' name='date value='$date'/>                                                                                                          </td>     <td>             <select name='status' form='form$y' required/>           <option>$status</option>           <option value='option1'>option1</option>           <option value='option2'>option2</option>         </select>     </td>     <td>         <input form='form$y' type='text' name='comment' value='$comment'/>     </td>     <td>         <input  type='submit' value='save' />         </form>      </td>                </tr>"; 

i've tried same thing via ajax page not refresh upon submission , code looks this:

<tr>     <form id='form$y' class='col-lg-3'/>     <div class='form-group'>                 <input type='hidden' name='id' class='form-control id' value='$id' />     </div>       <td>         <div class='form-group'>             <input style='height:18px' form='form$y' type='date' name='date' class='form-control date' value='$date' required/>                                                                                                              </div>     </td>     <td>             <div class='form-group'>             <select name='status' form='form$y' required/>               <option>$status</option>               <option value='option1'>option1</option>               <option value='option2'>option2</option>             </select>         </div>     </td>     <td>         <div class='form-group'>         <input form='form$y' type='text' name='comment' class='form-control comment' value='$comment'/>             </div>     </td>     <td>         <input type='button' form='form$y'  class='btn btn-default send' value='submit'>         </form>      </td>                </tr>"; 

in old form, worked correctly , data row in table submitted. in new form, submits data first row regardless of row press 'submit' button on.

the ajax is:

$(document).ready(function(){      function send_email(id,date,status,comment){         $.post('post.php',{id:id,date:date,status:status,comment:comment}, function(data){         if (data==='sent') {             alert('sent');         }else{             alert('error');         }       });     }       $('.send').click(function(){         var id = $('.id').val();         var date = $('.date').val();         var status = $('.status').val();         var comment = $('.comment').val();         send_email(id,date,status,comment);      })   }) 

is there way ensure value correct form submitted? form id not work via ajax? cobbled ajax few sources don't use often.