JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script>
<div class="slick">
  <div>
      <div class="item">1</div>
  </div>
  <div>
      <div class="item">2</div>    
  </div>
  <div>
      <div class="item">3</div>    
  </div>
  <div>
      <div class="item">4</div>
  </div>
  <div>
      <div class="item">5</div>    
  </div>
  <div>
      <div class="item">6</div>    
  </div>
  <div>
      <div class="item">7</div>
  </div>
  <div>
      <div class="item">8</div>    
  </div>
  <div>
      <div class="item">9</div>    
  </div>  
  <div>
      <div class="item">10</div>    
  </div>        
</div>

<button class='button'>pressme</button>

<div class="loadhtml">
  <div>
      <div class="item">load1</div>
  </div>
  <div>
      <div class="item">load2</div>    
  </div>
  <div>
      <div class="item">load3</div>    
  </div>
  <div>
      <div class="item">load4</div>
  </div>
  <div>
      <div class="item">load5</div>    
  </div>
  <div>
      <div class="item">load6</div>    
  </div>
  <div>
      <div class="item">load7</div>
  </div>
  <div>
      <div class="item">load8</div>    
  </div>
  <div>
      <div class="item">load9</div>    
  </div>  
  <div>
      <div class="item">load10</div>    
  </div>      
</div>

CSS

.slick {
    margin: 50px;
    background-color: black;
    width: 600px;
}

.slick button {
    background-color: red;
}

.item {
    margin: 0 10px;
    width: 100px;
    height: 100px;
    background-color: red;
}

.loadhtml {
    display: none;
}

JavaScript

var slider = $('.slick').slick({
    infinite: false,
    slidesToShow: 5,
    slidesToScroll: 1   
});

$('.button').click(function(){
    slider.slickAdd($('.loadhtml').html());
});