How to append and remove all element under div using jquery

Question

I created a form for product sale. admin can add fields for multiple product's click on add button using jquery and can remove by clicking on remove button. I'm trying to append this using div id but this doesn't work. here is my html part.

<div class="row" id="dsf">
    <div class="col-md-2">
        <select name="p_name" class="form-control" id="p_name">
            <option value="">-Select Product-</option>
            @foreach($products as $product)
                <option value="{{$product->product_id}}">{{$product->name}}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-2">
        <input type="text" name="p_code" id="p_code" class="form-control" readonly="">
    </div>
    <div class="col-md-2">
        <input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
    </div>
    <div class="col-md-2">
        <input type="text" name="u_price" id="u_price" class="form-control" readonly="">
    </div>
    <div class="col-md-1">
        <input type="text" name="ctn" id="ctn" class="form-control">
    </div>
    <div class="col-md-1">
        <input type="text" name="pcs" id ="pcs" class="form-control">
    </div>
    <div class="col-md-2">
        <input type="text" name="t_amt" id="t_amt" class="form-control">
    </div>
</div>

Here is my jquery part.

$(document).ready(function(){
    $("#addrow").click(function(){
        $("#dsf").append();
    });
});

Answer 1

if you want to append data after div then use this code

$(document).ready(function(){
        $("#addrow").click(function(){
            var content = $("#dsf").html();
            $('#addrow').append(content);
        });
    });

this is demo code for test

  $(document).ready(function(){ $("#addrow").click(function(){ var content = $("#dsf").html(); $('#addrow').append(content); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row" id="dsf"> <div class="col-md-2"> <input type="text" name="p_code" id="p_code" class="form-control" readonly=""> </div> <div class="col-md-2"> <input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly=""> </div> <div class="col-md-2"> <input type="text" name="u_price" id="u_price" class="form-control" readonly=""> </div> <div class="col-md-1"> <input type="text" name="ctn" id="ctn" class="form-control"> </div> <div class="col-md-1"> <input type="text" name="pcs" id ="pcs" class="form-control"> </div> <div class="col-md-2"> <input type="text" name="t_amt" id="t_amt" class="form-control"> </div> </div> <div id="addrow">Click</div> 

or you can append after addrow

 $(document).ready(function(){ $("#addrow").click(function(){ var content = $("#dsf").html(); $( content ).insertBefore( "#addrow" ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row" id="dsf"> <div class="col-md-2"> <input type="text" name="p_code" id="p_code" class="form-control" readonly=""> </div> <div class="col-md-2"> <input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly=""> </div> <div class="col-md-2"> <input type="text" name="u_price" id="u_price" class="form-control" readonly=""> </div> <div class="col-md-1"> <input type="text" name="ctn" id="ctn" class="form-control"> </div> <div class="col-md-1"> <input type="text" name="pcs" id ="pcs" class="form-control"> </div> <div class="col-md-2"> <input type="text" name="t_amt" id="t_amt" class="form-control"> </div> </div> <div id="addrow">Click</div>