jQuery: clone a div and insert it after last div with sequential id

Question

I need to insert a clone of a div containing a form after the last div with that same class. But how can I empty all the form fields? I have the following code:

<span id="add">Add</span>
<div id="0" class="addr">
    <input type="text" name="a">
    <input type="text" name="b">
    <input type="text" name="c">
</div>
<script>
    jQuery(document).ready(function($){
        $('#add').on('click',function() {
            var id = $(".addr:last").attr('id');
            $(".addr:last").clone().attr('id', ++id).insertAfter(".addr:last");
        });
    });
</script>

Answer 1

Instead of cloning div, you can use html of that div to append it like this

$('#add').on('click', function () {
        var id = $(".addr:last").attr('id');
        var appendDiv = jQuery($(".addr:last")[0].outerHTML);
            appendDiv.attr('id', ++id).insertAfter(".addr:last");
    });

Answer 2

var temp = $(".addr:last").clone()
temp = $(temp).(':input').val('');
$(temp).attr('id', ++id).insertAfter(".addr:last");

Answer 3

Try to use $(".className").empty();

Remove all child nodes of the set of matched elements from the DOM

Answer 4

You can use the following to clean the fields inside DIV

$('.addr').find('input:text').val('');