If I have 36 products it will be convert in 3 parts using single for loop. https://prnt.sc/niRsMi54jPYn
<div class="1">
1, 2, 3, 4,
5, 6, 7 , 8,
9, 10, 11, 12
</div>
<div class="2">
13, 14, 15, 16,
17, 18, 19 , 20,
21, 22, 23, 24
</div>
<div class="3">
25, 26, 27, 28,
29, 30, 31 , 32,
33, 34, 35, 36
</div>
I've used cycle for it. But this is not a proper way, because I don't get the active element from each div by default and after selecting.
{% assign currentvendor = product.vendor | downcase %}
<div class="row master-bundle">
{% for custom in collections[currentvendor].products %}
{% if product.handle != custom.handle %}
{% cycle 'section_customize_bundle_start': '<div class="master-details"><h3 class="tab_drawer_heading">Earings Pair</h3> <div class="custom-bundle tab_content">','','','','','','','','','','','' %}
<div class="bundle-items {% if forloop.index == 1 %}active{% endif %}">
{% comment %}<a href="{{ custom.url }}">{% endcomment %}
<img src="{{ custom.featured_image | img_url: 'master'}}">
<p class="option-product-title">{{ custom.title }}</p>
{% comment %} </a>{% endcomment %}
</div>
{% cycle 'section_customize_bundle_end': '','','','','',,'','','','','','','<input type="hidden" class="hidden-bundle"></div></div>' %}
{% endif %}
{% endfor %}
</div>