title: Replace values after a clone in jQuery
body: <p>I need to <code>clone()</code> a  and change the id values after.</p>
  
  <p>So here's my code:</p>
  
  <pre><code>$('#add').click(function() {
    var newRow = $('.accordion').eq(0).clone();
    var newRow = newRow.html().replace('item1', 'item2')
    $('#list-items').append(newRow);
  });
  </code></pre>
  
  <p>And the HTML is:</p>
  
  <pre><code>&lt;div id="add"&gt;Add row&lt;/div&gt;
  &lt;form class="form-horizontal" id="list-items"&gt;
      &lt;div class="panel-group accordion"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="ui-tabs.html#item1"&gt;Item number 1&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="item1" class="panel-collapse collapse"&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Problem is after that:
  This <code>href="ui-tabs.html#item1"</code> change to <code>href="ui-tabs.html#item2"</code> but not the occurrence after. So <code>id="item1"</code> isn't change to <code>id="item2"</code>.</p>
  
  <p>Any help on it ?</p>