title: jQuery copy HTML elment and add value to all children IDs
body: <p>interesting one. i'm working on a big, modular form that the user can add or remove services in and need to reach into the DOM, copy an HTML element, and add a value to the end of both it and it's children's ID's.</p>
  
  <p>So for example:</p>
  
  <pre><code>&lt;li id="serviceModule" class="serviceModule"&gt;
      &lt;ol&gt;
          &lt;li id="subModuleTypeA"&gt;subModule&lt;/li&gt;
          &lt;li id="subModuleTypeB"&gt;
              &lt;ol&gt;
                  &lt;li id="subModuleTypeASubModuleX"&gt;subSubModule&lt;/li&gt;
                  &lt;li id="subModuleTypeASubModuleY"&gt;subSubModule&lt;/li&gt;
                  &lt;li id="subModuleTypeASubModuleZ"&gt;subSubModule&lt;/li&gt;
              &lt;/ol&gt;
          &lt;/li&gt;
          &lt;li id="subModuleTypeC"&gt;subModule&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Would become:</p>
  
  <pre><code>&lt;li id="serviceModule1" class="serviceModule"&gt;
      &lt;ol&gt;
          &lt;li id="subModuleTypeA1"&gt;subModule&lt;/li&gt;
          &lt;li id="subModuleTypeB1"&gt;
              &lt;ol&gt;
                  &lt;li id="subModuleTypeASubModuleX1"&gt;subSubModule&lt;/li&gt;
                  &lt;li id="subModuleTypeASubModuleY1"&gt;subSubModule&lt;/li&gt;
                  &lt;li id="subModuleTypeASubModuleZ1"&gt;subSubModule&lt;/li&gt;
              &lt;/ol&gt;
          &lt;/li&gt;
          &lt;li id="subModuleTypeC1"&gt;subModule&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Method that adds value:</p>
  
  <pre><code>$.fn.valulator = function(magic){
  
      var thiis = $(this),
          el,
          id;
  
      thiis.add(thiis.children()).each(function(){
  
          el = $(this);
          id = el.attr('id');
  
          el.attr('id', id + magic);
      });
  
      return this;
  };
  </code></pre>
  
  <p>Binding that triggers <code>valulator</code>:</p>
  
  <pre><code>$add.click(function(event){
  
      event.preventDefault();
  
      $index = $index + 1;
      $('.serviceModule')
          .clone()
          .valulator($index)
          .appendTo('#services');
  });
  </code></pre>
  
  <p>Thanks for your help! Here's a jsFiddle:
  <a href="http://jsfiddle.net/phqvr/3/" rel="nofollow">http://jsfiddle.net/phqvr/3/</a></p>
  
  <hr>
  
  <p>UPDATE</p>
  
  <p>Finding that the first issue i'm running into within <code>valulator()</code> is that <code>children()</code> only brings up direct descendants.. instead i need to search ALL elements.</p>