JSFiddle - React, Tailwind, and code Playground

by blowsie

HTML

<div class="landscape">L</div>
<div class="portrait">P1</div>
<div class="landscape">L</div>
<div class="portrait">P2</div>
<div class="landscape">L</div>
<div class="portrait">P3</div>
<div class="portrait">P4</div>
<div class="landscape">L</div>
<div class="landscape">L</div>
<div class="portrait">P5</div>
<div class="portrait">P6</div>
<div class="portrait">P7</div>
<div class="portrait">P8</div>
<div class="portrait">P9</div>
<div class="portrait">P10</div>
<div class="landscape">L</div>
<div class="landscape">L</div>

JavaScript

//$(".portrait:not('.start'), .portrait:not('.end')").each(function(index,item){
//    $(this).addClass('start')
//      var nextp = $(item).next('.portrait').addClass('end');
//      $(item).wrap("<div id='slide" + index + "'></div>");
//      $("#slide"+index).append(item).append(nextp);
//    });

var odd = true
$(".portrait").each(function(index,item){
    if (odd == true) {
        $(this).addClass('odd');
        odd = false;
    }
    else {
        $(this).addClass('even');
        odd = true;
    }
});

$(".portrait.odd").each(function(index,item){
      var nextp = $(item).nextUntil('.odd').filter('.even');
      $(item).wrap("<div id='slide" + index + "'></div>");
      $("#slide"+index).append(item).append(nextp);
    });