title: Clone element and append and remove?
body: <p>Is there a easy way to clone entire <code>.box</code> element on click <code>button-add</code> , and append it after
  Also i need <code>button-remove</code> to delete only that box?</p>
  <h1>HTML</h1>
  <pre><code>    &lt;input class=&quot;button-add&quot; type=&quot;button&quot; value=&quot;Clone box&quot;&gt;
  
   &lt;div class=&quot;form-group box&quot;&gt;
      &lt;div class=&quot;col-lg-7&quot;&gt;
          &lt;p&gt;Article&lt;/p&gt;
          &lt;select class=&quot;form-control&quot; name=&quot;article()&quot;&gt;
              &lt;option value=&quot;&quot;&gt;Smoki Coko Kokos&lt;/option&gt;
              &lt;option value=&quot;8&quot;&gt;Koka Kola&lt;/option&gt;
              &lt;option value=&quot;10&quot;&gt;Cipiripi&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-3&quot;&gt;
          &lt;p&gt;Quantity&lt;/p&gt;
          &lt;input class=&quot;form-control&quot; value=&quot;3&quot; name=&quot;qty()&quot; type=&quot;text&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-2&quot;&gt;
          &lt;input class=&quot;button-remove&quot; type=&quot;button&quot; value=&quot;Delete box&quot;&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>this is what i have for now but does not work,</p>
  <h1>JQUERY</h1>
  <pre><code>$(document).ready(function() {
  
      $('.button-add').click(function(){
  
          //we select the box clone it and insert it after the box
          $('.box').clone().insertAfter(&quot;.box&quot;);
      });
      });
  </code></pre>