「もっと見る」ボタンで追加表示させる方法

<ul class="list">
  <li class="target">target 1</li>
  <li class="target">target 2</li>
  <li class="target">target 3</li>
  <li class="target">target 4</li>
  <li class="target">target 5</li>
  <li class="target">target 6</li>
  <li class="target">target 7</li>
  <li class="target">target 8</li>
  <li class="target">target 9</li>
  <li class="target">target 10</li>
  <li class="target">target 11</li>
  <li class="target">target 12</li>
  <li class="target">target 13</li>
  <li class="target">target 14</li>
  <li class="target">target 15</li>
</ul>

<button class="btn-more">もっと見る</button>

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 660px;
  margin: 0 auto;
}
.target {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  margin: 10px;
  background: #828E98;
  color: #fff;
  
  &.is-hidden {
    display: none;
    opacity: 0;
  }
  &.is-show {
    animation: fadeIn 1s ease; /* フェードイン用のスタイル */
  }
}
.btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  margin: 20px auto;
  border-radius: 25px;
  background: #AA987F;
  color: #fff;
  
  &:hover {
    opacity: .9
  }
}

@keyframes fadeIn {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
     transform: translateY(0);
    opacity: 1;
  }
}

var showNum = 6, // 最初に表示しておく件数
    addNum = 3,  // クリックごとに表示したい件数
    target = '.target',
    btn = $('.btn-more');

 $(target + ':nth-child(n + ' + (showNum + 1) + ')').addClass('is-hidden');

 btn.on('click', function () {
   $(target + '.is-hidden').slice(0, addNum).removeClass('is-hidden').addClass('is-show'); // アニメーション用にis-showクラスを追加
  
   if ($(target + '.is-hidden').length == 0) {
     btn.fadeOut();
   }
});