title: How to create a copy of an element when a button is clicked
body: <p>I have been trying to learn to build websites, and I've come to an issue I cannot seem to find the answer to. I would like #buttonNewNote to create a copy of #cloneBox when it is clicked, but I can't seem to figure out how. Thank you!</p>
  
  <p>Code </p>
  
  <pre><code>      &lt;html&gt;
  &lt;body&gt;
    &lt;div id='navbar'&gt;
      &lt;div id='siteTitle'&gt;
        &lt;h1&gt; Notes.com &lt;/h1&gt;
        &lt;button id= 'buttonNewNote'&gt; New Note &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='cloneBox'&gt;
      &lt;textarea rows="4" cols="50"&gt;Enter your notes Here! &lt;/textarea&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code> .cloneBox {
          top: 200px;
          left:50px;
          display: -webkit-flex;
          border: 5px;
          border-top: 20px;
          border-style: solid;
          border-color: yellow;
          width:260px;
      }
  
      #noteInput {
        position: relative;
        min-width: 50px;
        width: 200px;
        height: 100px;
        border: 5px;
        border-top: 20px;
        border-color:  #3296d2;
      }
  </code></pre>
  
  <p>What I have of the Jquery</p>
  
  <pre><code>$(document).ready( function() {
    $('.cloneBox').draggable();
    $('#buttonNewNote').click(function(){
      $(document.createElement('div'));
        $('div').html('&lt;textarea rows="4" cols="50"&gt;Enter your notes Here! 
  &lt;/textarea&gt;')
        $('div').addClass('cloneBox')
  
  
    });
  });
  </code></pre>
  
  <p>Thank you so much!</p>