jquery document ready example

jquery

HTML

<section class="item-form">
         <div class="row">
          <div class="col-lg-2 col-md-6">
            <label for="quanty-0">Quanty</label>
            <input class="need-to-dup" type="text" name="quanty-0" value="" >
          </div>
          <div class="col-lg-4 col-md-6">
            <label for="item-0">Item</label>
            <input class="need-to-dup" type="text" name="item-0" value="" >
          </div>

          <div class="col-lg-4 col-md-6">
            <label for="comment-0">Comment</label>
            <input class="need-to-dup" type="text" name="comment-0">
          </div>
          <div class="col-lg-2 col-md-6">
            <label for="remove-0">Remove</label>
            <button class="need-to-dup remove-item-button btn-block btn-outline-secondary" type="button" name="remove-0">
              <i class="fa fa-trash-o" aria-hidden="true"></i>
            </button>
          </div>
      </div>
      <div class="add-item">
        <p>Add Another Item</p>
      </div>
    </section>

JavaScript

$(document).ready(function(){

	$(".add-item").on("click", function() {
  	var rows = $(".row","section.item-form"),
    		first = rows.first(), last = rows.last(), clone = first.clone();
        console.log(first);
    clone.insertAfter(last).find("[name!=''][name]").each(function() {
    	var name = $(this).attr("name").split("-")[0];
    	$(this).siblings("label").attr("for", name + "-" + rows.length);
    	$(this).attr("name", name + "-" + rows.length);
    });
    
  });

});