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');
    });


});

So you want to `clone` the `3 buttons` along with `each tr`? — Rohan Kumar, Jan 29 '14 at 10:31
Its because these buttons are not part of table. they are in a separate div. You can add these button to element to clone them with text fields. — umair, Jan 29 '14 at 10:32
Buttons are being cloned but 3 buttons get disappear from the previous element when the next element comes. — Rumin, Jan 29 '14 at 10:34
Even if they get cloned all buttons for rows will be at the end of your table which doesn't make much sense. These buttons should be part of your table. — umair, Jan 29 '14 at 10:39

P.Sethuraman · Accepted Answer · 2014-01-29T11:25:54.193

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();
}

U brought it close, But can U please, disable the 'Cancel' button if the number of rows come to 1 as I made it. — Rumin, Jan 29 '14 at 11:23
Thank you mate for your precious time for answering it out!! — Rumin, Jan 29 '14 at 11:33

score 0 · Answer 2 · answered Jan 29 '14 at 10:25

0

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

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

answered Jan 29 '14 at 10:25

Chris Dixon

9,147
5
36
68

please see my edited question. Buttons still getting disappeared in your fiddle – Rumin Jan 29 '14 at 10:28

clone div using jquery

2 Answers2