title: jquery: modifing attributes of a clone
body: <p>I have a slice of html that looks like this:</p>
  
  <pre><code>&lt;div class="search_container"&gt;
      &lt;input id="keywords_0_keyword_names" name="keywords[0][keyword_names]" type="text"&gt;
      &lt;select id="keywords_0_keyword_conditions" name="keywords[0][keyword_conditions]"&gt;
          &lt;option value="is"&gt;is&lt;/option&gt;
          &lt;option value="is not"&gt;is not&lt;/option&gt;
          &lt;option value="is like"&gt;is like&lt;/option&gt;
      &lt;/select&gt;
      &lt;input id="keywords_0_keyword_values" name="keywords[0][keyword_values]" type="text"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to clone that and then modify the id and name attributes to hold 1 not 0:</p>
  
  <pre><code>var next_index = 1;
  var $container = $(".search_container");
  var $new_container = $container.clone();
  $new_container.find( $( "input[id^='keywords_'],select[id^='keywords_']" ) ).each(function(){
      $(this).attr("id").replace(/\d/,next_index);
      $(this).attr("name").replace(/\d/,next_index);
  })
  $container.parent().append($new_container); // form-group div which stores all the search containers
  </code></pre>
  
  <p>The problem is it seems that the id and name attributes of clone are not permanently changed, because when I load web page, the cloned html still holds a value of 0 and not 1.</p>
  
  <p>What might I be doing wrong?</p>