clone div using jquery

Question

Based on the question asked Generalizing jQuery dynamic add/remove form input for multiple forms. I was able to add several functionalities in my project but was unable to clone the input fields without making button disappear.

I tried cloning the entire div using jquery clone div and append it after specific div but still was unsuccessful.

So my question is how can I clone the input fields along with the buttons without making buttons('add','cancel' and 'save') of previously cloned elements disappear. After clicking on ADD button, all the three buttons of the last element should remain.

here is what I have tried: jsfiddle

following is the java script:

 $(document).ready(function() {
    $("#table1").hide();
    $("#table2").hide();
    $("#services").click(function(){
        $("#table1").slideToggle();
        $("#table2").hide();
        $("#cctable tr").attr('class', 'dinput');
        $("#dbtable tr").attr('class', 'dbinput');
        $('.btnDel').attr('disabled','disabled');
    });

    $("#products").click(function(){
        $("#table2").slideToggle();
        $("#table1").hide();
        $("#dbtable tr").attr('class', 'dinput');
        $("#cctable tr").attr('class', 'ccinput');
        $('.btnDel').attr('disabled','disabled');
    });
    $('.btnAdd').click(function() {

        var num     = $('.dinput').length; // how many "duplicatable" input fields we currently have
        var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('.dinput:last').clone();

        // insert the new element after the last "duplicatable" input field
        $('.dinput:last').after(newElem);
        $(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );

        // enable the "remove" button
        $('.btnDel').attr('disabled','');


        // business rule: you can only add 10 names
          if (newNum == 10)
            $('.btnAdd').attr('disabled','disabled');
    });

    $('.btnDel').click(function() {
        var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
        $('.dinput:last').remove();     // remove the last element

        // enable the "add" button
        $('.btnAdd').attr('disabled','');

        // if only one element remains, disable the "remove" button
        if (num-1 == 1)
            $('.btnDel').attr('disabled','disabled');
    });


});

Answer 1

Updated FIDDLE

HTML

    <h2 align="center">Add Services And Products To Your Proposal</h2>
<div id="whole">
    <div id="tablebuttons">
        <input type="button" value="Add Services"id="services"  > 
        <input type="button" value="Add Products"id="products" >
    </div>
    <div id="table1">

        <form id="ccards" method="post">
            <table cellspacing="5">
                <tr>
                    <th></th>
                    <th align="center">Name:</th>
                    <th align="center">Description:</th>
                    <th align="center">Action:</th>
                </tr>
                    <tbody id ="cctable" >
                        <tr class="ccinput">
                            <td> 1 </td>
                            <td> <input type="text" name="cc_ser[]" id="name" maxlength="20"/> </td> 
                            <td> <textarea name= "txt[]"></textarea> </td>

                            <td>
                              <input type="button" class="btnAdd" id="add" value="Add" onclick="addrow()" />
            <input type="button" class="btnDel" value="Cancel" id="btnDel" onclick="removerow(this)" />
            <input type="button" name="save" value="Save" id="save" />                                   
                            </td>
                        </tr>
                    </tbody>
            </table>
        </form>
    </div>

    <div id="table2">

        <form id="ccards" method="post">
            <table cellspacing="5">
                <tr>
                    <th></th>
                    <th align="center">Name:</th>
                    <th align="center">Description:</th>
                    <th align="center">Action:</th>
                </tr>
                    <tbody id ="dbtable" >
                        <tr class="dbinput">
                            <td> 1 </td>
                            <td> <input type="text" name="db_pro[]" id="name" maxlength="20"/> </td> 
                            <td> <textarea name= "txt[]"></textarea> </td>
                            <td>
                              <input type="button" class="btnAdd" onclick="addrow();" id="add" value="Add" />
            <input type="button" class="btnDel" value="Cancel" onclick="removerow(this);" id="btnDel" />
            <input type="button" name="save" value="Save" id="save" />                                   
                            </td>
                        </tr>
                    </tbody>
            </table>

        </form>
    </div>
</div>

Jquery

    $(document).ready(function() {
        $("#table1").hide();
        $("#table2").hide();
        $("#services").click(function(){
            $("#table1").slideToggle();
            $("#table2").hide();
            $("#cctable tr").attr('class', 'dinput');
            $("#dbtable tr").attr('class', 'dbinput');
            $('#btnDel').attr('disabled','disabled');
        });

        $("#products").click(function(){
            $("#table2").slideToggle();
            $("#table1").hide();
            $("#dbtable tr").attr('class', 'dinput');
            $("#cctable tr").attr('class', 'ccinput');
            $('#btnDel').attr('disabled','disabled');
        });

    });

function addrow()
{
            var num     = $('.dinput').length; // how many "duplicatable" input fields we currently have
            var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('.dinput:last').clone();

            // insert the new element after the last "duplicatable" input field
            $('.dinput:last').after(newElem);
            $(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );
if (newNum > 1)
            // enable the "remove" button
            $(newElem).find('.btnDel').attr('disabled','');


            // business rule: you can only add 10 names
              if (newNum == 10)
                $('.btnAdd').attr('disabled','disabled');
}

function removerow(sender)
{
            $(sender).parent().parent().remove();
}

Answer 2

Updated: http://jsfiddle.net/YRwmB/3/

You need to add the line: newElem.find("input").val(''); for this to work.