---
title: "Laravel 12: Add or Remove Multiple Input Fields with jQuery Example"
url: "https://magecomp.com/blog/laravel-12-add-remove-multiple-input-fields-with-jquery/"
date: "2026-09-14T12:42:48+00:00"
modified: "2026-09-14T12:42:50+00:00"
author:
name: "Bharat Desai"
url: "https://magecomp.com"
categories:
- "Laravel"
word_count: 1332
reading_time: "7 min read"
summary: "Today, I will show you how to create and remove multiple input fields and store into database in a Laravel 12 application. We will create dynamic add-more input fields functionality with a Laravel ..."
description: "Learn how to add and remove multiple input fields dynamically with jQuery in Laravel 12"
keywords: "Laravel"
language: "en"
schema_type: "Article"
related_posts:
- title: "How to Perform Laravel Authentication with Breeze"
url: "https://magecomp.com/blog/laravel-authentication-with-breeze/"
- title: "Leveraging Laravel Helpers: Simplifying Development Tasks"
url: "https://magecomp.com/blog/laravel-helpers/"
- title: "Laravel Docker 13 – Set Up MySQL and Adminer in Docker"
url: "https://magecomp.com/blog/laravel-docker-13-set-up-mysql-and-adminer/"
---
# Laravel 12: Add or Remove Multiple Input Fields with jQuery Example
_Published: September 14, 2026_
_Author: Bharat Desai_
Today, I will show you how to create and remove multiple input fields and store into database in a Laravel 12 application. We will create dynamic add-more input fields functionality with a Laravel 12 application.
In this example, we will create “products” and “product_stock” tables. Then we will create a form with a product name and add more inputs for quantity and price; that way, the user can add multiple stock items during product creation. We also display products with the sum of quantities. So let’s see the example below step by step:
## Steps to Add or Remove Multiple Input Fields with jQuery in Laravel 12:
### Step 1: Install Laravel 12
First, we need a fresh Laravel 12 application, so we’ll start from scratch. So, open your terminal or command prompt and run the command below:
```
composer create-project laravel/laravel example-app
```
### Step 2: Create Table Migration and Model
In this step, we need to create the products and product_stock tables, as well as the models.
**Create Migration**
```
php artisan make:migration create_products_table Migration
```
```
id();
$table->string("name");
$table->timestamps();
});
Schema::create('product_stocks', function (Blueprint $table) {
$table->id();
$table->bigInteger("product_id");
$table->integer("quantity");
$table->integer("price");
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('products');
}
};
```
Run migration now:
```
php artisan migrate
```
**Create Model**
Run the command to create the Product and ProductStock models:
```
php artisan make:model Product
php artisan make:model ProductStock
```
**app/Models/Product.php**
```
hasMany(ProductStock::class);
}
}
```
**app/Models/ProductStock.php**
```
name('add-more.store');;
```
### Step 4: Create Controller
In this step, we need to create ProductController and add the following code to that file:
**app/Http/Controllers/ProductController.php**
```
"required", "stocks.*" => "required" ];
foreach($request->stocks as $key => $value) {
$rules["stocks.{$key}.quantity"] = 'required';
$rules["stocks.{$key}.price"] = 'required';
}
$request->validate($rules);
$product = Product::create(["name" => $request->name]);
foreach($request->stocks as $key => $value) {
$product->stocks()->create($value);
}
return redirect()->back()->with(['success' => 'Product created successfully.']);
}
}
```
### Step 5: Create Blade Files
Here, we will create the **addMore.blade.php** file with the following code.
**resources/views/addMore.blade.php**
```
Laravel 12 Add More Fields Example - ItSolutionStuff.com
Laravel 12 Add More Fields Example - ItSolutionStuff.com
@session('success')
{{ $value }}
@endsession
Product List:
ID
Name
Total Quantity
@forelse($products as $product)
{{ $product->id }}
{{ $product->name }}
{{ $product->stocks->sum('quantity') }}
@empty
There are no products.
@endforelse
{!! $products->links('pagination::bootstrap-5') !!}
```
**Run Laravel App:**
All the required steps have been done; now you have to type the command given below and hit Enter to run the Laravel app:
```
php artisan serve
```
Now, go to your web browser, type the given URL, and view the app output:
http://localhost:8000/add-more
## Conclusion
In this example, we learned how to add and remove multiple input fields dynamically using jQuery in Laravel 12.
We created product and product stock tables and stored multiple stock records for a single product.
We also implemented validation and displayed the total stock quantity for each product.
This approach helps create flexible forms where users can easily manage multiple related entries in a single form.
## FAQ
**1. How can I add multiple input fields dynamically in Laravel 12?**
You can use jQuery to dynamically append new input rows to a Laravel form. In this example, users can click Add More to add multiple stock fields.
**2. How can I remove dynamically added input fields in Laravel?**
Use a jQuery click event on the remove button to delete the corresponding table row from the form.