title: Appending an HTML div inside another div
body: <p>I would like to add another div within a div group on a button click in order to have a continuously generating slider. Like so: </p>
  
  <pre><code>&lt;div class="carousel-items"&gt;
      &lt;div class="date-carousel-other slider"&gt;&lt;/div&gt;
      &lt;div class="date-carousel-other slider"&gt;&lt;/div&gt;
      &lt;div class="date-carousel-other slider"&gt;&lt;/div&gt;&lt;!-- new div --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently my java script is:</p>
  
  <pre><code>$('.slick-next').click(function(){
      $('"&lt;div class="date-carousel-other slider"&gt;&lt;/div&gt;"').append( ".carousel-items" );
  });
  </code></pre>
  
  <p>The result is appending the boxes underneath my slider (big div) instead of inside the slider. Appending to <code>".slider"</code> instead, duplicates all the div's and wedges boxes inside the slider. </p>
  
  <p>Is my syntax off or am I using the wrong method?</p>