title: Cloning a div and changing the id's of all the elements of the cloned divs
body: <p>I am working with a django project, and part of the requirement is to have a button on the html page which when clicked clones a particular div and appends it to the bottom of the page as shown in the screenshot:
  <a href="https://i.stack.imgur.com/RT4Xp.png" rel="nofollow noreferrer">Screenshot of the Page</a></p>
  
  <p>I was successful in doing this applying the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var vl_cnt =1; //Initial Count
      var original_external_int_div = document.getElementById('ext_int_div_1'); //Div to Clone
      function addVL(){
          var clone = original_external_int_div.cloneNode(true); // "deep" clone
          clone.id = "ext_int_div_" + ++vl_cnt; // there can only be one element with an ID
          original_external_int_div.parentNode.append(clone);
          var cloneNode = document.getElementById(clone.id).children[0].firstElementChild.firstElementChild;
          cloneNode.innerText = "External Interface "+vl_cnt;  //Change the Header of the Cloned DIV 
          $(clone).find('input:text').val('') //Clear the Input fields of the cloned DIV        
          document.getElementById("vl_count").value = vl_cnt; //Keep track of the number of div being cloned
          window.scrollTo(0,document.body.scrollHeight);
  
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div style="height:0px;clear:both"&gt;&lt;/div&gt;
  &lt;div style="float:right"&gt;
  
      &lt;span class="label label-primary" id="add_cp_button" style="cursor: pointer;" onclick="addVL()"&gt;+ Add VL &lt;/span&gt;
  
  &lt;/div&gt;
  &lt;div style="height:0px;clear:both"&gt;&lt;/div&gt;
  &lt;div&gt;
      &lt;div id="ext_int_div_1"&gt;
          &lt;div class="section"&gt;
  
              &lt;fieldset class="scheduler-border"&gt;
                  &lt;legend class="scheduler-border"&gt;External Interface 1&lt;/legend&gt;
                  &lt;div   class="sectionContent" style="border:0px solid grey;width:75%"&gt;
                      &lt;div style="height:15px;clear:both"&gt;&lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-sm-4"&gt;
                              &lt;label&gt;Name&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;input type="text" class="form-control"   name="vl_name_1" id="vl_name_1" placeholder="Name"/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div style="height:15px;clear:both"&gt;&lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-sm-4"&gt;
                              &lt;label&gt;Connectivity Type&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;select class="form-control" name="vl_connectivity_type_1" id="vl_connectivity_type_1"&gt;
                                  &lt;option value="VIRTIO"&gt;VIRTIO&lt;/option&gt;
                                  &lt;option value=""&gt;None&lt;/option&gt;
                              &lt;/select&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div style="height:15px;clear:both"&gt;&lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-sm-4"&gt;
                              &lt;label&gt;Connection point Ref&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;select class="form-control" name="vl_con_ref_1" id="vl_con_ref_1" /&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div style="height:15px;clear:both"&gt;&lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/fieldset&gt;
              &lt;div style="height:2px;clear:both;"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;input type="hidden" name="vl_count" id="vl_count" value="1" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now i have a new issue, i need to make sure that the ID's of the elements withing the DIV are unique too, for example the the ID = "vl_name_1" for the first input box must be changed to "vl_name_2" when creating the creating the clone.</p>
  
  <p>I tried the following <a href="https://stackoverflow.com/questions/2331197/clone-a-div-and-change-the-ids-of-it-and-all-its-children-to-be-unique?noredirect=1&amp;lq=1">example</a> and added the snipped within my addVL() function just to see if any changes happen to my div's:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#ext_int_div_1").clone(false).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + clone.id); });</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, the above code got me nothing ( i am pretty sure the above piece of code is rubbish since i have no clue what it is doing).</p>
  
  <p>Help appreciated here.
  Thank you</p>