PHP Laravel Dynamically Add Remove Table Row

Today, We want to share with you PHP Laravel Dynamically Add Remove Table Row Using jQuery.In this post we will show you Dynamically add input fields and save data to Database in Laravel 5.7, hear for PHP Laravel 5.7 Dynamically Add Remove input fields using JQuery Ajax Example with Demo we will give you demo and example for implement.In this post, we will learn about Laravel 5.7 Insert Dynamic Images Arrays JQuery on Database in One Column with an example.

PHP Laravel Dynamically Add Remove Table Row Using jQuery

There are the Following The simple About PHP Laravel Dynamically Add Remove Table Row Using jQuery Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel 5.7 Dynamically Add or Remove Table Row Using jQuery, so the Laravel – Dynamically Add or Remove input fields using JQuery for this example is following below.

Read Also:  jquery AJAX Dynamically Add remove PHP MySQLi

Simple PHP Laravel 5.7 Dynamically Add Remove input fields using JQuery Ajax Example with Demo

Create catlists Table and Model


php artisan make:migration create_catslist_table

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCatslistTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('catlists', function (Blueprint $table) {
     * Reverse the migrations.
     * @return void
    public function down()

php artisan migrate
php artisan make:model CatList

namespace App;
use Illuminate\Database\Eloquent\Model;
class CatList extends Model
    public $table = "catlists";
    public $fillable = ['name'];

Define Laravel Routes


Route::get("addProduct","[email protected]");
Route::post("addProduct","[email protected]");

Create ProductController

php artisan make:controller ProductController

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\CatList;
use Validator;

class ProductController extends Controller

    public function addProduct()
        return view("addProduct");

    public function addProductMore(Request $request)
        $rules = [];
        foreach($request->input('name') as $key => $value) {
            $rules["name.{$key}"] = 'required';
        $validator = Validator::make($request->all(), $rules);

        if ($validator->passes()) {
            foreach($request->input('name') as $key => $value) {
            return response()->json(['success'=>'done']);
        return response()->json(['error'=>$validator->errors()->all()]);

Create Laravel Blade File


<!DOCTYPE html>
    <title>Laravel 5.7 - Dynamically Add or Remove input fields using JQuery</title>
    <link rel="stylesheet" href="" />  

    <script src="//"></script>
    <script src=""></script>  
    <meta name="csrf-token" content="{{ csrf_token() }}">

<div class="container">
    <h2 align="center">Laravel 5.7 - Dynamically Add or Remove input fields using JQuery -</h2>  
    <div class="form-group">
         <form name="product_name" id="product_name">  
            <div class="alert alert-danger error-message-display" style="display:none">
            <div class="alert alert-success print-success-msg" style="display:none">
            <div class="table-responsive">  
                <table class="table table-bordered" id="dynamic_field">  
                        <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>  
                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  

<script type="text/javascript">
      var postURL = "<?php echo url('addProduct'); ?>";
      var i=1;  

           $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="name[]" placeholder="Enter your Product Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  

      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   

          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                        $(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');

      function previewMessage (msg) {
         $.each( msg, function( key, value ) {

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  How To Hack WIFI Password Using jumpstart and dumpper


You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about PHP Laravel Dynamically Add Remove Table Row Using jQuery.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Dynamically Add Remove multiple input fields in PHP MYSQL with Jquery Ajax
  2. Read Also:  Simple jQuery Form Validator validation
  3. Read Also:  add active class onclick javascript
  4. Read Also:  jQuery Add and Remove Multiple Div Dynamically using PHP
  6. Read Also:  jquery $.extend() Method with Example
  7. Read Also:  Dynamically Add-remove Form Fields in jquery with PHP and mysql
  8. Read Also:  Create Bootable USB Drive Steps - Bootable Pen Drive
  9. Read Also:  Handling Active Navigation Menu in Laravel Example
  10. Read Also:  JQuery Remove combobox items(options) from DropDownList