title: jquery clone form fields and increment id
body: <p>I have a block of form elements which I would like to clone and increment their ID's using jQuery clone method. I have tried a number of examples but a lot of them only clone a single field.</p>
  
  <p>My block is structured as such:</p>
  
  <pre><code>&lt;div id="clonedInput1" class="clonedInput"&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;label for="txtCategory" class=""&gt;Learning category &lt;span class="requiredField"&gt;*&lt;/span&gt;&lt;/label&gt;
        &lt;select class="" name="txtCategory[]" id="category1"&gt;
          &lt;option value=""&gt;Please select&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
     &lt;div&gt;
       &lt;label for="txtSubCategory" class=""&gt;Sub-category &lt;span class="requiredField"&gt;*&lt;/span&gt;&lt;/label&gt;
       &lt;select class="" name="txtSubCategory[]" id="subcategory1"&gt;
         &lt;option value=""&gt;Please select category&lt;/option&gt;
       &lt;/select&gt;
     &lt;/div&gt;
     &lt;div&gt;
       &lt;label for="txtSubSubCategory"&gt;Sub-sub-category &lt;span class="requiredField"&gt;*&lt;/span&gt;&lt;/label&gt;
       &lt;select name="txtSubSubCategory[]" id="subsubcategory1"&gt;
         &lt;option value=""&gt;Please select sub-category&lt;/option&gt;
       &lt;/select&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Obviously elements are lined up a lot better but you get the idea.</p>
  
  <p>I would like to keep the id structure i.e. category1, subcategory1 etc as I use these to dynamically display select options based on the parent selection so if its possible to have each cloned block like category1/category2/category3 etc that would be great.</p>