The problem at hand arises from the fact that the javascript determines the vertical placement of the boxes on the page according to their position in a list.

transY = index * 10;

I've kept a backup of the code snippet (http://jsfiddle.net/dh286ksq/4/), but here are the modifications required:

Assign an id to both unordered lists:

<ul class="tabs" id="list1">

<ul class="tabs" id="list2">

Add two additional lists in the javascript section based on the new IDs:

var tabs = $('li.tabs__item'); // current list
var tabs1 = $('#list1 li.tabs__item'); // new list
var tabs2 = $('#list2 li.tabs__item'); // new list

Also, change the following in the javascript:

tabs.each(function(index) {
    transY = index * 10;
    scale = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
});

to this:

tabs1.each(function(index) {
    transY = index * 10;
    scale = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
});

tabs2.each(function(index) {
    transY = index * 10;
    scale = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
});

The objective is to obtain separate lists for the two columns and then utilize the javascript to arrange the box positions based on these distinct lists. By doing so, each column will begin indexing at 0 instead of carrying over from the previous column.

In my opinion, this solution addresses the issue:

var Tabs = (function() {

  var toggler = $('.views-toggle');
  var tabs      = $('li.tabs__item');
  var toggled = false;

  var transform = function(el, value) {
    el.css('transform', value);
    el.css('-webkit-transform', value);
    el.css('-ms-transform', value);
  };
   var transition = function(el, value) {
    el.css('transition', value);
    el.css('-webkit-transition', value);
    el.css('-ms-transition', value);
  };

  var moveContent = function() {
    if (!toggled) {
      toggled = true;
    } else {
      toggled = false;
    }

    moveTabs(toggled);

    return false;
  };

  var moveTabs = function(a) {
    var transY, scale;

    if (a) {
      tabs.css({
        'opacity': '1',
        'box-shadow': '0 30px 60px rgba(0,0,0,0.4)',
        'cursor': 'pointer'
      });

      tabs.each(function(index) {         

        transY  = $(this).index() * 10;        
        scale       = 0.5 + $(this).index()/25;

        transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
      });

      toggler.addClass('views-toggle--hidden');
    } else {
      transform(tabs, 'translate3d(0,0,0) scale(1)');
    }
  };

  var switchTabs = function() {
    var selected = $(this);
    var others = selected.siblings('li');

    if (toggled) {
      transition(others, 'transform 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06)');
      transform(others, 'translate3d(0, 100%, 0) scale(1)');
      transform(selected, 'translate3d(0,0,0) scale(1)');
      tabs.css({
        'box-shadow': '0 30px 60px rgba(0,0,0,0.4)',
        'cursor': 'default'
      });
      toggled = false;

      selected.on('transitionend webkitTransitionend', function() {
        toggler.removeClass('views-toggle--hidden');
        others.css({
          'opacity': '0'
        });
        transform(others, 'translate3d(0, 100%, 0) scale(0)');
        transition(others, 'transform 0.9s cubic-bezier(0.23, 1, 0.32, 1)');
        selected.off('transitionend webkitTransitionend');
      });
    }
  };

  var setup = function() {
    toggled = true;
    moveTabs(toggled);
  };

  var init = function() {
    $(document).on('ready', setup);
        toggler.on('click touchstart', moveContent);
    tabs.on('click touchstart', switchTabs);
  };

  return {
    init: init
  };

}());

Tabs.init();

https://jsfiddle.net/trn44k7j/5/

Within your Javascript code

  tabs.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

The issue lies in the fact that the transformation is not being reset, causing the second column to be transformed as if it were appended to the first column.

A more effective approach is needed for setting "transY". Currently, it is being set based on the index within the list of "tab"s, resulting in tab 1 being shifted 10vh down, tab 2 at 20vh, and so forth.

An Easy Solution to Understand

If you anticipate having 4 "tabs" per column consistently, a hardcoded solution can be implemented by adjusting the above code snippet:

  tabs.each(function(index) {
    transY  = (index%4) * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

Alternatively, a revision of the logic for determining the y location of "tabs" may be required, taking into account factors beyond just the number of "tabs". This demonstration serves an educational purpose, highlighting the flaw in the initial logic and introducing a straightforward fix without intricate methods.

EDIT:

Resolution using Jquery Tree Navigation

A dynamic solution that avoids hardcoding and delves into a slightly more complex approach. The idea involves selecting every "tabs" list and iterating through each child element with the class "tabs__item", adjusting their positioning based on height dynamically. This method is fully adaptable and applicable to any scenario involving various numbers of "tab__item"s within different sets of "tabs", offering flexibility without requiring CSS file alterations or structural changes.

 $('.tabs').each(function(index) {
      $(this).children('li.tabs__item').each(function(index) {
          transY    = index * 10;        
          scale     = 0.5 + index/25;

          transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
      });
   });

JS Fiddle Link: https://jsfiddle.net/trn44k7j/8/