Cloning Form Without cloning input values

Question

I cloned a form but it is cloing input values also. Here is form html

<form role="form" method="post" action="<?php echo base_url(); ?>staff_activity/add_ftth" enctype="multipart/form-data" >

            <div id="main">
            <div class="col-md-12">
                <div class="form-group col-md-4">
                    <label>Client's Name</label>
                    <input type="text" class="form-control" name="client_name[]" placeholder="Client's Name" id="client_name" autofocus required/>
                </div>


        <div class="form-group col-md-4">
                    <label>Phone Number</label>
                    <input type="text" class="form-control" name="phone_number[]" placeholder="Phone Number" id="phone_number"/>
                </div>
                <div class="col-md-4">
                    <label>Package</label>
                    <select  class="form-control" name="package[]" >
                        <option selected="">


                        </option>

                    </select>
                </div>

            </div>



            <div class="col-md-12">
                <div class="form-group col-md-6">
                <label>Remarks</label>
                <textarea name="remarks[]" class="form-control" placeholder="remarks" ></textarea>
                </div>
            </div>
            </div>

            <div class="col-md-12 buttonbox">
                <div class="pull-left">
                <button type="button" class="btn btn-success add" >ADD +</button>
                <button type="button" class="btn btn-danger remove" >DEL -</button>
                </div>
            </div>
<div class="col-md-12">
                <div class="pull-right">
                    <input type="submit" class="btn btn-success btn-xm submit" name="submit" value="Submit" />
                </div>
            </div>

        </form>

And my Script for cloning is as follows

 $(document).ready(function() {
  var i = 0;
  var last12 = $('.buttonbox').last();
  $(document).on('click', '.add', function() {
      var clone = $('#main').last().clone().attr("id", "main" + i++).insertBefore(last12);

      //clone.id = "main" + i;

  });

  $(".remove").click(function(){
          $("#main:last").remove();
  });
 });

While cloning the division the form values are also being cloned. You can check this code in JSFiddle. https://jsfiddle.net/szn0007/yoebgocq/

Answer 1

Try the following: reset the inputs and the textarea using val('') for the select we will select the first element in the select(the default one)

 var clone = $('#main').clone().find("input,textarea").val("").end().find('select option:first-child()').attr('selected','selected').end().attr("id", "main" + i++).insertBefore(last12);

to delete use:

  $(".remove").click(function(){
          $('div[id^="main"]:last').remove();
  });

demo