title: Delete a record from table using ajax in laravel 5
body: <p>I want to delete the record using ajax.</p>
  
  <p><strong>view</strong></p>
  
  <pre><code>@foreach( $products as $product )
      &lt;tr&gt;
          &lt;td&gt;{{ $product-&gt;code }}&lt;/td&gt;
          &lt;td&gt;{{ $product-&gt;name }}&lt;/td&gt;
          &lt;td&gt;{{ $product-&gt;display }}&lt;/td&gt;
          &lt;?php $time = date('d M, Y h:i:s A', strtotime($product-&gt;created_at)); ?&gt;
          &lt;td&gt;{{ $time }}&lt;/td&gt;
          &lt;td&gt;
              &lt;a href="{{ url('/admin/products/' . $product-&gt;id . '/edit') }}" class="links-dark edits pull-left"&gt;
                  &lt;i class="fa fa-edit fa-lg"&gt;&lt;/i&gt;
              &lt;/a&gt;
              &lt;div id="deleteTheProduct"&gt;
                  {!! Form::open(['method' =&gt; 'DELETE', 'id' =&gt; 'formDeleteProduct', 'action' =&gt; ['AdminProductsController@destroy', $product-&gt;id]]) !!}
                      {!! Form::button( '&lt;i class="fa fa-trash fa-lg"&gt;&lt;/i&gt;', ['type' =&gt; 'submit', 'class' =&gt; 'delete text-danger deleteProduct','id' =&gt; 'btnDeleteProduct', 'data-id' =&gt; $product-&gt;id ] ) !!}
                 {!! Form::close() !!}
             &lt;/div&gt;
         &lt;/td&gt;
     &lt;/tr&gt;
  @endforeach
  </code></pre>
  
  <p><strong>controller</strong></p>
  
  <pre><code>public function destroy( $id, Request $request ) {
      $product = Product::findOrFail( $id );
  
      if ( $request-&gt;ajax() ) {
          $product-&gt;delete( $request-&gt;all() );
  
          return response(['msg' =&gt; 'Product deleted', 'status' =&gt; 'success']);
      }
      return response(['msg' =&gt; 'Failed deleting the product', 'status' =&gt; 'failed']);
  }
  </code></pre>
  
  <p><strong>ajax delete</strong></p>
  
  <pre><code>$('.deleteProduct').on('click', function(e) {
      var inputData = $('#formDeleteProduct').serialize();
  
      var dataId = $('#btnDeleteProduct').attr('data-id');
  
      $.ajax({
          url: '{{ url('/admin/products') }}' + '/' + dataId,
          type: 'POST',
          data: inputData,
          success: function( msg ) {
              if ( msg.status === 'success' ) {
                  toastr.success( msg.msg );
                  setInterval(function() {
                      window.location.reload();
                  }, 5900);
              }
          },
          error: function( data ) {
              if ( data.status === 422 ) {
                  toastr.error('Cannot delete the category');
              }
          }
      });
  
      return false;
  });
  </code></pre>
  
  <p>** Edit 1 **:</p>
  
  <p>Here's what I get if I just return console.log(msg)</p>
  
  <pre><code>Object {
      id: "1",
      code: "PROD-521420",
      name: "Testing the product name",
      category_id: "3",
      short_description: "This is the short description"…
  }
  category_id: "3"
  code: "PROD-521420"
  created_at: "2015-06-07 23:00:31"
  deleted_at: null
  description: "This is the long description"
  discount_price: "125.00"
  display: "Enabled"
  id: "1"
  meta_description: "This is the meta description"
  meta_keywords: "This is the meta keywords"
  meta_title: "This is the meta title"
  name: "Testing the product name"
  price: "150.00"
  short_description: "This is the short description"
  updated_at: "2015-06-08 10:04:26"
  </code></pre>
  
  <p>The thing is that, this deletes the product, but only the first row and not the one that is clicked.</p>
  
  <p>I want to delete the product which is clicked.</p>
  
  <p>Can anyone help ?</p>