title: Change inner elements id during clone
body: <p>I'm doing a clone of a DIV element on button click, I'm able to change the value of ID of the DIV element I'm cloning. But is it possible to change the id of the inner element. </p>
  
  <p>In the below code I'm changing the Id of <code>#selection</code> while cloning, I need to dynamically change the id <code>#select</code>.</p>
  
  <pre><code>&lt;div id="selections"&gt;
    &lt;div class="input-group" id="selection"&gt;
      &lt;span class="input-group-addon"&gt;
      &lt;i class="icon wb-menu" aria-hidden="true"&gt;&lt;/i&gt;
       &lt;/span&gt;
      &lt;select class="show-tick" data-plugin="select2" id="select"&gt;
        &lt;option&gt;True&lt;/option&gt;
        &lt;option&gt;False&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button class="btn btn-primary" type="button" style="margin-left: 30px;"&gt;
    Add new selection
  &lt;/button&gt;
  </code></pre>
  
  <p>The JS below</p>
  
  <pre><code>$(function() {
    //on click
    $("body").on("click", ".btn-primary", function() {
      alert($(".input-group").length)
      var
      //get length of selections
        length = $(".input-group").length,
        //create new id
        newId = "selection-" + length++,
        //clone first element with new id
        clone = $("#selection").clone().attr("id", newId);
      //append clone on the end
      $("#selections").append(clone);
    });
  });
  </code></pre>