JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
    <div id="container"></div>
    <div id="buttons">
      <button id="show">
        show
      </button>
      <button id="hide">
        hide
      </button>
    </div>

JavaScript

var stage = new Kinetic.Stage({
	  container: 'container',
	  width: 578,
	  height: 200
	});
	var layer = new Kinetic.Layer();

function paintRectMassive(i) {
    	(function() {
			var book_x = book_xx +(i*4);
			var book_y = book_yy +(i*4);
			var pageListFF = new Kinetic.Shape ({
			  drawFunc: function(canvas) {
				var context = canvas.getContext();
				context.beginPath();
				context.moveTo(book_x,book_y);
				context.lineTo(book_x,book_y +20);
				context.lineTo(book_x +20,book_y +20);
				context.lineTo(book_x +20,book_y);
				context.closePath();
				canvas.fillStroke(this);
			  },
			  fill: '#AAE',
			  stroke: '#888',
			  strokeWidth: 2,
			  visible: true,
			  name: 'kvadrat0'+i.toString(10)  // имена должны быть индивид. для каждого пересозданного объекта 'pageListFF'
			});

			pageListS[0 +i*2] = pageListFF; // ссылка(+сохранение) на объект, пока он существует таким
											//Тут вопрос !! как сохранять или использовать потом фигуру (иным способом)
			layer.add(pageListFF);
		})();
        (function() {
			var book_x = book_xx +50 +(i*4);
			var book_y = book_yy +(i*4);
			var pageListFF = new Kinetic.Shape ({
			  drawFunc: function(canvas) {
				var context = canvas.getContext();
				context.beginPath();
				context.moveTo(book_x,book_y);
				context.lineTo(book_x,book_y +20);
				context.lineTo(book_x +20,book_y +20);
				context.lineTo(book_x +20,book_y);
				context.closePath();
				// drawing
				canvas.fillStroke(this);
			  },
			  fill: '#AAE',
			  stroke: '#888',
			  strokeWidth: 2,
			  visible: true,
			  name: 'kvadrat1'+i.toString(10)
			});

			pageListS[1 +i*2] = pageListFF;
			layer.add(pageListFF);
		})();

}

	var pageListS = [];
	var buttonLR = [];
	var book_xx = 100.5;  // центральная точка для середины книги  -отсчет от центра(верх) сшивки листов
	var book_yy = 50.5;
	for (i = 9; i>=0; i--) { 
		paintRectMassive(i);
	}

	// add the layer to the stage
	stage.add(layer);

	pageListS[0].on('mouseover touchstart',...