Jquery clone function is appending twice

Question

So i am trying to use Jquery clone function. My problem is the first clone is okay. Then then the next are always appending two times.

JS

 var initpriceinquiry = function(){
 $(document).on("click",".btn_addMore_unit",function () {
  var cloned = $(".price_inquiry_source tbody ").html();
  var oldL = $(".units").length;
  cloned = cloned.replace(/\[\x\]/g,oldL);
  $(cloned).insertBefore("#targetRow");
  modSelect2("select[name='pi_product_id[]']","/admin/price_inquiry/get_ajax_input?type=product_id&custom_type",function(obj) {
 $.ajax({url:"", type: "get", data:"get_unit=1&product_id="+obj.val(),  success: function(data)
  {
      eval("var record = "+data+";");
      obj.parent().next().html(record[0]);
      obj.parent().next().next().html(record[1]);
      obj.parent().next().next().next().html("<textarea name = 'remark' class = 'form-control'></textarea>");
  } });
 });
 });  
 }

HTML

 <table class = 'hidden price_inquiry_source'>
        <tr class = 'units'>
        <td >
            <select name = 'pi_product_id[]' class = 'form-control unitcodes[x]' style="width:120px">
            </select>
            <br>
            <a href='javascript:void(0)' style='' onclick="$(this).parent().parent().remove();" class=''><i class='fa fa-trash'></i></a>
        </td>
        <td></td>
        <td></td>
        <td></td>
        </tr>
     </table> 
 {{-- To BE CLONED --}}

Cloned should be inserted here

  <table class="table table-condensed table-hover" id = "tableData">
  <thead>
  <tr>
  <th>UNIT CODE</th>
  <th>DESCRIPTION</th>
  <th>SELLING PRICE</th>
  <th>REMARKS</th>
  </tr>
  </thead>
  <tbody>
  <tr id = 'targetRow'>
  <td colspan="4"><button class="btn btn-link btn_addMore_unit" 
  href="javascript:void(0)" style="display: inline-block;"><i class="fa fa-
   plus "></i>&nbsp;ADD UNIT</a></td>
  </tr>
  </tbody>
  </table>

See Image Attached for my problem

Image

Any help would be appreciated thanks!

Answer 1

Try this

 //add `add_field_button` to your clone button
        <a class="add_field_button btn btn-xs btn-success">Click me</a>


    // add this class `input_fields_wrap` to your input field div
        <div class="input_fields_wrap">
        <input type="text" class="form-control" name="" value="i will be clone">
        </div>

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
   
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append("<div>"+
              "<div class='form-group form-inline'>"+
              "<label for=''>hello there</label>"+
              "<input type='text' class='form-control' name='' value='i am cloned one'>"+
              "</div>"+
            "<a href='#' class='btn btn-danger btn-xs remove_field'>remove me</a></div>");
        }
    });
   
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">



<div class="row">

<a class="add_field_button btn btn-xs btn-success">clone me</a>

  <div class="col-md-4 input_fields_wrap">
    <div class="form-group form-inline">
      <label for="">sample input</label>
      <input type="text" class="form-control" name="" value="i will be clone">
    </div>
  </div>
</div>

</div>