Dynamic Field Rows
Dynamically add or remove form rows — useful for order line items, multiple addresses, or any repeating input group.
jQuery
Intermediate
4 min read
Adding and Removing Dynamic Fields
Example
$("#addRow").on("click", function() {
const row = `
<div class="row g-2 mb-2 field-row">
<div class="col-8">
<input type="text" class="form-control" name="item[]" placeholder="Item name">
</div>
<div class="col-3">
<input type="number" class="form-control" name="qty[]" placeholder="Qty" value="1">
</div>
<div class="col-1">
<button type="button" class="btn btn-danger btn-sm remove-row">X</button>
</div>
</div>`;
$("#fields").append(row);
});
$(document).on("click", ".remove-row", function() {
$(this).closest(".field-row").remove();
}); Pro Tip
Use event delegation ($(document).on) for dynamically added elements.