JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <ul>
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    <li id="4">4</li>
    <li id="5">5</li>
    <li id="6">6</li>
    <li id="7">7</li>
    <li id="8">8</li>
    <li id="9">9</li>
    <li id="10">10</li>
</ul>
</div>

<div data-id="1">1.1</div>
<div data-id="2">1.2</div>
<div data-id="3">1.3</div>
<div data-id="4">1.4</div>
<div data-id="5">1.5</div>
<div data-id="6">1.6</div>
<div data-id="7">1.7</div>
<div data-id="8">1.8</div>
<div data-id="9">1.9</div>
<div data-id="10">1.10</div>

CSS

.wrapper{
  overflow: hidden;
}
ul{
  width: 90%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
}
ul li{
  width: 50%;
  border: 1px solid  #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  height: 100px;
  background: #fff;
  list-style: none;
  text-align: center;
}
ul li:nth-child(odd){
  background: #f00;
}
li.active{
  width: 200%;
  height: 100px;
  margin-left: -50%;
  float: left;
  text-align: center;
  background: #0f0!important;
  list-style: none;
}
div[data-id]{
  background: #00f;
  display: none;
}

JavaScript

$('li').on('click',function(){
  $('li.active').hide();
  var targetId = $(this).attr('id'),
      position = $(this).offset().top,
      curHeight = parseInt($(this).css('height')),
      tempVal = 0,
      strArr = 'ul li:not(.active):nth-child(n+' + targetId++  + ')',
      str = 'div[data-id=' + targetId + ']';
      
      
      $(strArr).each(function(key,val){
          var pos = $(val).position().left;
          console.log($(val).index());
          
          if(pos <= tempVal){
          		$(val).before('<li class="active">' + $(str).show() + "</li>");
              return false;
          }
          
          tempVal = pos;
      });
});