Создание динамического языка для карусели с помощью Jquery

Я строю карусель с ul li динамически, используя следующий код:

        var arrEanSample = [];
        var arrPathSample = [];
        var arrValSample = [];

        var thecookie = $.cookie("sample");
        var cookies = thecookie.split("|");

        cookies.forEach(function(item){

            var barcode= item.split('~')[0];
            var value = item.split('~')[1];
            var path = item.split('~')[2];

            arrEanSample.push(barcode);
            arrPathSample.push(path);
            arrValSample.push(value);
        });

        var output='<ul class="slides">';
       for(var i = 0; i < arrEanSample.length; i++)
        {
        output+= '<li ean="' + arrEanSample[i] + '">\
                    <img src="' + arrPathSample[i] + '" alt="pix" draggable="false">\
                    <a imgpath="' + arrPathSample[i] + '"  value="' + arrValSample[i] +'" ean="' + arrEanSample[i] +'" class="unselectsample-thumb" data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">\
                        <i aria-hidden="true" class="fonticon fonticon-close-neg">\
                            <span class="sr-only">Remove</span>\
                        </i>\
                    </a>\
               </li>';
        }
        output+='</ul>';
        $('.flexslider').empty().append(output);

В приведенном выше коде создается html, который выглядит так (ненужные коды удалены):

<div class="flexslider">
  <ul class="slides">
    <li ean="9904153320507">
    <li ean="9904153300509">
    <li ean="9904153441004">
    <li ean="9911199120503">
    <li ean="9911199071003">
  </ul>
</div>

Моя проблема заключается в том, что я должен сгруппировать все LI в наборах из 10, в результате чего один li будет считать ul с 10 такими LI. Следующим образом:

<div class="flexslider">
  <ul class="slides">
    <li>
      <div class="list-samples">
        <ul class="reset">
          <li> li number 1 </li> 
          <li> li number 2 </li> 
          <li> li number 3</li> 
          <li> li number 4</li> 
          <li> li number 5</li> 
          <li> li number 6</li> 
          <li> li number 7</li> 
          <li> li number 8</li> 
          <li> li number 9</li> 
          <li> li number 10</li> 
        </ul>
      </div>
     </li>
     <li>
         <div class="list-samples">
            <ul class="reset">
              <li> li number 11 </li>
              <li> the list goes on - as sets of 10 ... </li>
            </ul>
          </div>
     </li>
  </ul>
</div>

Может кто-нибудь, пожалуйста, помогите мне в достижении вышеуказанного кода с моим стартовым JS

Любая помощь будет оценена

благодаря