title: clone div using jquery
body: <p>Based on the question asked <a href="https://stackoverflow.com/questions/11874564/generalizing-jquery-dynamic-add-remove-form-input-for-multiple-forms?rq=1">Generalizing jQuery dynamic add/remove form input for multiple forms</a>.  I was able to add several functionalities in my project but was unable to clone the input fields without making button disappear.</p>
  
  <p>I tried cloning the entire div using <a href="https://stackoverflow.com/questions/8707756/jquery-clone-div-and-append-it-after-specific-div">jquery clone div and append it after specific div</a> but still was unsuccessful.</p>
  
  <p>So my question is how can I clone the input fields along with the buttons without making buttons(<em>'add','cancel' and 'save'</em>) of previously cloned elements disappear. After clicking on ADD button, all the three buttons of the last element should remain.</p>
  
  <p>here is what I have tried: <a href="http://jsfiddle.net/YRwmB/2/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>following is the java script:</p>
  
  <pre><code> $(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( "&lt;td&gt;" + newNum + "&lt;/td&gt;" );
  
          // 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');
      });
  
  
  });
  </code></pre>