Restructure carousel items in DOM

Question

I am trying to re-wrap items of my carousel via restructuring the DOM. I will be doing this on screen size but ignore that, just need to figure out for starters how to correctly modify the elements.

Currently on each slide there are multiple images, I need each flex-grid-item to be its own carousel slide, so I end up with 1 image in each slide.

What I have currently:

<slide 1>
 <div class="carousel-item">
    <div class="carousel__flex-grid">
       <div class="flex-grid-item" data-slick-item>1</div>
       <div class="flex-grid-item" data-slick-item>2</div>
    </div>
 </div>
</slide 1>

<slide 2>
 <div class="carousel-item">
    <div class="carousel__flex-grid">
       <div class="flex-grid-item" data-slick-item>3</div>
       <div class="flex-grid-item" data-slick-item>4</div>
       <div class="flex-grid-item" data-slick-item>5</div>
    </div>
 </div>
</slide 2>

What I am trying to achieve:

<slide 1>
 <div class="carousel-item">
   <div class="flex-grid-item" data-slick-item>1</div>
 </div>
</slide 1>
<slide 2>
 <div class="carousel-item">
   <div class="flex-grid-item" data-slick-item>2</div>
 </div>
</slide 2>
<slide 3>
 <div class="carousel-item">
    <div class="flex-grid-item" data-slick-item>3</div>
 </div>
</slide 3>
<slide 4>
 <div class="carousel-item">
     <div class="flex-grid-item" data-slick-item>4</div>
 </div>
</slide 4>
<slide 5>
 <div class="carousel-item">
    <div class="flex-grid-item" data-slick-item>5</div>
 </div>
</slide 5>

On the re-structure, the items do not need to be wrapped in <div class="carousel__flex-grid">.

JS Fiddle: https://jsfiddle.net/tr0pec2m/11/

$(function () {
    
    	// Grab all carousels and store
    	var slickCarousels = document.querySelectorAll('[data-slick-me]');
    
    	// Grab all carousels items
    	var slickCarouselItem = document.querySelectorAll('[data-slick-item]');
      
      // Iterate through each
  		$(slickCarousels).each(function() {
        
        $(this).slick({
          dots: true,
          infinite: false,
          slidesToShow: 1,
          slidesToScroll: 1
        });
        
    	});
     
    });

html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
      width: 50%;
      margin: 25px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

      .slick-slide img {
        border: 1px solid #000;
      }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }

    .hidde-sldie img {
      border: 5px solid red;
    }

    .show-hide-slide-btn {
      text-align: center;
      margin: 0 auto;
      display: block;
    }

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
  <section class="carousel slider" data-slick-me>
    <div class="carousel-item">
      <div class="flex-grid">
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=1">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=2">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="flex-grid">
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=3">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=4">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=5">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="flex-grid">
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=6">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=7">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="flex-grid">
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=8">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=9">
        </div>
        <div class="flex-grid-item" data-slick-item>
          <img src="http://placehold.it/150x100?text=10">
        </div>
      </div>
    </div>
  </section>