How to create html jquery form to add multiple rows

 

here we are using bootstrap for html design and jquery for dynamic form elements.

Firstly create a single product form layout using this code

Html form structure

<div class="col-12">
   <div class="row mt-3" parent-row="" style="border: 1px solid rgb(204, 204, 204);">
      <div class="col-5">
         <div class="form-group">
            <label><span product-count="">1</span> Product</label>
            <input class="form-control" />
         </div>
      </div>
      <div class="col-5">
         <div class="form-group">
             <label>Descriptions</label>
             <input class="form-control" />
         </div>
       </div>
       <div class="col-2" parent-row-action="" style="margin-top: 2rem;">
          <button class="btn btn-primary" parent-row-action-add-btn="" type="button">Add</button>
       </div>
   </div>
</div>

In this code, we are using the custom attributes to define rows and other selectors for jquery.

Custom Attributes for jquery selector:-

[parent-row]:- this is used to identify the parent to which you want to add multiple.

[product-count]:- this attribute identify product count which is shown like 1 product, 2 product, n product, etc. based on added rows.

[parent-row-action]:- this attribute is the parent of action buttons like Add or Remove. 

[parent-row-action-add-btn]:- this attribute is use for jquery click listner for add new rows in html form.

[parent-row-action-rem-btn]:- this attribute use for jquery click lister to remove current row from html form. It works on the same rows, not another row.

jQuery Structure:-

<script>
    (function($, window, undefined) {
        $("body").on("click", "[parent-row-action-add-btn]", function() {
            $("[parent-row]:last").after($(this).closest("[parent-row]").clone());
            $("[parent-row]:last").find("[product-count]").html($("[parent-row]").length);
            $("[parent-row]:last").prev('[parent-row]').find("[parent-row-action]").html('<button type="button" parent-row-action-rem-btn class="btn btn-primary">Remove</button>');
        });
        $("body").on("click", "[parent-row-action-rem-btn]", function() {
            $(this).closest("[parent-row]").remove();
            $("[parent-row]").each(function(i) {
                $(this).find("[product-count]").html(i + 1);
            });
        });
    })(jQuery, window);
</script>

In the jquery part we are using above attribute as selector to perform dynamic actions.

Add New Functionality:-

Add New Row:- In this part we are using [parent-row-action-add-btn] click listner to add new row using this code

$("body").on("click", "[parent-row-action-add-btn]", function() {
   $("[parent-row]:last").after($(this).closest("[parent-row]").clone());
   $("[parent-row]:last").find("[product-count]").html($("[parent-row]").length);
   $("[parent-row]:last").prev('[parent-row]').find("[parent-row-action]").html('<button type="button" parent-row-action-rem-btn class="btn btn-primary">Remove</button>');
});

This is the add new row code in jquery.

first line is get last [parent-row] element with after jquery function to add after last parent-row element with same using clone function like $(this).closest("[parent-row]").clone() inside after function, this is clone and add new row after last row.

The second line is increasing the no of product line like 1 product, 2 product and on. there are using attribute [product-count] with find [parent-row] length and add in last row product count.

The third one is performing to replace the remove button in the previous row when adding a new row the add button only in the last [parent-row].

Remove Row and Update Product Count:-

$("body").on("click", "[parent-row-action-rem-btn]", function() {
   $(this).closest("[parent-row]").remove();
   $("[parent-row]").each(function(i) {
      $(this).find("[product-count]").html(i + 1);
   });
});

There is the remove functionality working descriptions.

The first line is remove the parent row, like if you click any remove button then ist find own parent [parent-row] selector and remove it. This is found using the closest jquery function which is found only first occurrence in travelers in html child to parent elements.

The second line the loop of all [parent-row] which set the actual [product-count] numbering in html elements, this is based on the index which add one and set the html in product count element.