title: Multiple form with same attribute
body: <p>i was trying to implement a comment system. where everybody can reply of every comment. The system here is when  someone click on a comment a form will be visible and he can reply. So if there is 4 comments so 4 reply box will come. i wanted to store those reply through ajax. But the problem is i can't specify which form is actually submitting and so page got refresh as i specify the form with class. i tried to submit the above form which will be visible under every comment if a user click on the reply button:</p>
  
  <pre><code> &lt;form class="replyComment"&gt;
        &lt;textarea name="comment" class="ru_input" placeholder="Write your reply"&gt;&lt;/textarea&gt;
        &lt;input type="hidden" value="{{$row-&gt;id}}" name="comment_id"&gt;
        &lt;div class="bt_area"&gt;
           &lt;button class="floatRight btn btn-primary"&gt;Reply
           &lt;/button&gt;
        &lt;/div&gt;
     &lt;/form&gt;
  </code></pre>
  
  <p>And i was trying to submit through following ajax. </p>
  
  <pre><code>$( ".replyComment").submit(function( event ) {      
   event.preventDefault();      
        $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
            });
              $.ajax({
                  type: "POST",
                  url: '{{url("/postReply")}}',
                  async: false,
                  data: 
                  {
                    product_id : {!! json_encode($product-&gt;id)!!},
                    comment : event.currentTarget[0].value,
                    comment_id : event.currentTarget[1].value
                  },
                  success: function(data) 
                  {
                    console.log(data)
  
                  },
                  error:function(data)
                  {
  
                  }
  
              });
  });
  </code></pre>