Как обернуть группу divов

Есть массив

var arEx = ['28019174','24250104','26136871','28139970','28254275','27987031'];

С помощью кода ниже получаю наборы данных про автомобили (нужно только его изображение) и вставляю все полученные изображение на страницу.

$.each(arEx, function(index,avtoId){
      var urlFetch = 'https:...avtoId';
      fetch(urlFetch)
      .then((resp) => resp.json())
      .then(function(data){
        var firstIm = data.photoData.seoLinkF;
           var div = document.createElement('div');
           div.className="product";
           var a = document.createElement('a');
           var imgsrc = document.createElement('img');
           imgsrc.src = firstIm;
           a.setAttribute("href", firstIm );
          a.append(imgsrc);
          div.append(a);
           // a.insertAdjacentElement("afterbegin", imgsrc);
           // div.insertAdjacentElement("afterbegin", a);
document.querySelector("#carsal2").append(div);
     })
})

В результате получается что-то вроде

    <section id="carsal2">
       <div class="product">
           <a href="photo1.jpg"><img src="photo1.jpg"></a>
       </div>
       <div class="product">
           <a href="photo2.jpg"><img src="photo2.jpg"></a>
       </div>
       <div class="product">
           <a href="photo3.jpg"><img src="photo3.jpg"></a>
       </div>
       <div class="product">
           <a href="photo4.jpg"><img src="photo4.jpg"></a>
       </div>
       <div class="product">
           <a href="photo5.jpg"><img src="photo5.jpg"></a>
       </div>
       <div class="product"><a href="photo6.jpg"><img src="photo69f.jpg"></a>
       </div>
    </section>

Проблема в том, что нужно каждые 3 обернуть дивом с классом d-flex, но никак не поучается