How to clone div content and append only one at the time?

Question

I have form that should allow user to click on the Add Row and create another identical row. This will required new row to give an option to the user to delete that row if created accidentally. Here is my code that doesn't works correct. After I click on add row second time code will insert another 3 rows. Somethings odd is going on with the way I insert and clone new rows.

 $("#add_row").on('click', addRow); function addRow() { $(".data-bug-item").clone().insertAfter(".data-bug-item"); }; 

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div id="dataBug" class="bug-section"> <div class="row"> <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12"> <button type="button" class="btn" name="add_row" id="add_row"> <span class="glyphicon glyphicon-plus-sign"></span> Add Row </button> </div> </div> <div class="form-group required data-bug-item"> <label class="control-label" for="type"><span class="label label-default">Column & Description:</span></label> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2"> <select class="form-control" name="frm_column" id="frm_column" required> <option value="">--Choose--</option> <option value="1">Location</option> <option value="2">Name</option> <option value="3">Year</option> <option value="4">City</option> </select> </div> <div class="col-xs-9 col-sm-9 col-md-10 col-lg-10"> <input class="form-control" type="text" name="frm_descr" id="frm_descr" placeholder="Enter Description" required> </div> </div> </div> </div> 

I would like to see only one row at the time and button on the end of the Description input field for Delete.

Answer 1

The simplest way to do that, it's to clone a minor part of html.

You're cloning everything including the cloned part.

After data-bug-item create a div with same name just to identify and clone JUST the form and not all informations inside the div.

Example:

 $("#add_row").on('click', addRow); function addRow() { $("#form-data-bug-item").clone().insertAfter(".data-bug-item"); }; 

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div id="dataBug" class="bug-section"> <div class="row"> <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12"> <button type="button" class="btn" name="add_row" id="add_row"> <span class="glyphicon glyphicon-plus-sign"></span> Add Row </button> </div> </div> <div class="form-group required data-bug-item"> <div id="form-data-bug-item"> <label class="control-label" for="type"><span class="label label-default">Column & Description:</span></label> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2"> <select class="form-control" name="frm_column" id="frm_column" required> <option value="">--Choose--</option> <option value="1">Location</option> <option value="2">Name</option> <option value="3">Year</option> <option value="4">City</option> </select> </div> <div class="col-xs-9 col-sm-9 col-md-10 col-lg-10"> <input class="form-control" type="text" name="frm_descr" id="frm_descr" placeholder="Enter Description" required> </div> </div> </div> </div> </div> 

Now you just need to clone form-data-bug-item

PS: I'm not considering another things on your code, just the solution.