title: How do I conventionally create a replica of an element as a new element in HTML using JavaScript (jQuery)?
body: <p>Fiddle: <a href="https://jsfiddle.net/b8fr76cb/" rel="nofollow">https://jsfiddle.net/b8fr76cb/</a></p>
  
  <p>I would like to effectively create a new box by clicking on the "New" button in the navigation bar. I have seen recommendations online not to make use of long HTML strings and append the element that way, so, as far as my limited knowledge goes, this rules out creating a customised box from the get-go. I, thus, see two options:</p>
  
  <ol>
  <li><p>Make a replica of the current box (there will always be at least one, since there'll be a default one from the beginning) and adjust the properties as per the individual cases.</p></li>
  <li><p>Have a hidden "skeleton" box that I replicate and then adjust the properties as per the individual cases. However, I'm not sure whether this option is conventional or permitted or ugly or any other adjective.</p></li>
  </ol>
  
  <p>Please advise as to which of these is the better option or if there is a better, more recommendable option.</p>
  
  <p>Here's the HTML for the box:</p>
  
  <pre><code>&lt;ul class="list-group box"&gt;
    &lt;li class="list-group-item text-right box-title-area"&gt;
      &lt;h4 class="box-name not-selectable"&gt;Title&lt;/h4&gt;
      &lt;span class="glyphicon glyphicon-pencil rename-box" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;/li&gt;
    &lt;li class="list-group-item rename-box-controls"&gt;
      &lt;div class="input-group"&gt;
        &lt;input type="text" class="form-control new-name"&gt;
        &lt;div class="input-group-btn"&gt;
          &lt;button type="button" class="btn btn-default confirm-change-name"&gt;&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;button type="button" class="btn btn-default cancel-change-name"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="list-group-item not-selectable"&gt;
      Entry1
      &lt;span class="badge"&gt;10&lt;/span&gt;
    &lt;/li&gt;
    &lt;li class="list-group-item not-selectable"&gt;
      Entry2
      &lt;span class="badge"&gt;10&lt;/span&gt;
    &lt;/li&gt;
    &lt;li class="list-group-item not-selectable"&gt;
      Entry3
      &lt;span class="badge"&gt;10&lt;/span&gt;
    &lt;/li&gt;
    &lt;li class="list-group-item btn-group buttons" role="group"&gt;
      &lt;button type="button" class="btn btn-success"&gt;Button1&lt;/button&gt;
      &lt;button type="button" class="btn btn-primary"&gt;Button2&lt;/button&gt;
      &lt;button type="button" class="btn btn-info"&gt;Button3&lt;/button&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's the skeleton code for the JavaScript function that I need to complete:</p>
  
  <pre><code>$('#new-box').click(function() {
   /* Code to add new box alongside the last one. */
  });
  </code></pre>