JSFiddle - React, Tailwind, and code Playground

HTML

<div id="products">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  <div class="item">item 11</div>
  <div class="item">item 12</div>
  <div class="item">item 13</div>
  <div class="item">item 14</div>
  <div class="item">item 15</div>
  <div class="item">item 16</div>
  <div class="item">item 17</div>
  <div class="item">item 18</div>
  <div class="item">item 19</div>
  <div class="item">item 20</div>
  <div class="item">item 21</div>
  <div class="item">item 22</div>
  <div class="item">item 23</div>
  <div class="item">item 24</div>
  <div class="item">item 25</div>
  <div class="item">item 26</div>
</div>

CSS

.item{display:none;}

JavaScript

var arr=[]
	for(i=0;i<$('.item').length;i+=12){
		arr.push(i)
		}
	arr.push($('.item').length)
	console.log(arr)
	
	for(i=0;i<(arr.length-1);i++){
		$('<input name="" type="button" class="button" id="'+arr[i]+','+arr[i+1]+'" value="'+(arr[i]+1)+','+arr[i+1]+'">').appendTo('body')
		}
		
	$('.button').click(function(){
		$('div.item').hide()
		var divs=$('.item')
		var range=$(this).attr('id').split(',')
		divs.slice(range[0],range[1]).css({'display':'block'})
		})