JSFiddle - React, Tailwind, and code Playground

HTML

<form class="calc_listovka border" action="#" method="POST">	
			<div class="cell cell_header border">
				<div class="h1">Выберите параметры заказа:</div>
			</div>
			
			<div class="cell cell_1 border">
				<div class="cell_shadow cell_1_shadow"></div>
				
				<div class="cell_inner cell_1_inner">
					<div class="label">Плотность бумаги, г/м2</div>
					
					<div class="body">
						<div class="button_1_1 cell_button" data-switch="0" data-serial="0">130 г./кв.м.</div>
						
						<div class="button_1_2 cell_button" data-switch="0" data-serial="1">170 г./кв.м.</div>
					</div>
				</div>	
			</div>	

			<div class="cell cell_2 border">
				<div class="cell_shadow cell_2_shadow"></div>
				
				<div class="cell_inner cell_2_inner">			
					<div class="label">Формат, мм</div>
					
					<div class="body">
						<div class="button_2_1 cell_button" data-switch="0" data-serial="0">А3 (297х420)</div>
						
						<div class="button_2_2 cell_button" data-switch="0" data-serial="1">А4 (210х297)</div>
						
						<div class="button_2_3 cell_button" data-switch="0" data-serial="2">А5 (148х210)</div>
						
						<div class="button_2_4 cell_button" data-switch="0" data-serial="3">210х200</div>
					</div>
				</div>
			</div>	

			<div class="cell cell_3 border">
				<div class="cell_shadow cell_3_shadow"></div>
				
				<div class="cell_inner cell_3_inner">			
					<div class="label">Тип печати</div>
					
					<div class="body">
						<div class="button_3_1 cell_button" data-switch="0" data-serial="0">4+4</div>
						
						<div class="button_3_2 cell_button" data-switch="0" data-serial="1">4+0</div>
					</div>
				</div>
			</div>	

			<div class="cell cell_4">
				<div class="cell_shadow cell_4_shadow"></div>
				
				<div class="cell_inner cell_4_inner">					
					<div class="label">Тираж, шт</div>
					
					<div class="body">
						<select class="button_4_1 cell_button">
							<option value="500" data-switch="0">500</option>
							
							<option...

CSS

/*
INFO: 
	project: calc
	browsers: opera/chrome/FF/ie9/safari
	width: ? 
	columns: ?
	markup: Sergey Kalinin 06/2014 (prozaik81-2@yandex.ru)
	use: jq
	desc: 	calc
	version 1
*/

/*************************************************************************************************************** FONTS */


/*************************************************************************************************************** COMMON_STYLES */
html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img{ 
	border: none;
	margin: 0; 
	outline: none;	
	padding: 0;
}

html{
    height:100%;	
}

body{	
    height:100%;	
	margin: 0 auto;
	
	font: normal 12px 'helveticaneuecyrmedium', arial, sans-serif;
	color: #444;
}	

ul{
	list-style-type: none;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }

textarea{
	resize: none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	zoom:1;
}

.clear{
	clear: both;
}	
	
.hide{
	display: none;
}

.wrapped{
	width: 940px;
	margin: 0 auto;
}

input::-webkit-input-placeholder {
	color: #0096ef;
}

input:-moz-placeholder {
	color: #0096ef;
}

.border{
	border: 1px solid #000;
}

/*************************************************************************************************************** GLOBAL_layout */
.calc_listovka{
	width: 610px;
	margin: 0 auto;
}

	.calc_listovka .cell{
		min-height: 100px;
		overflow: hidden;
		position: relative;
	}
	
		.calc_listovka .cell .cell_shadow{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: #ccc;
			opacity: 0.5;
			z-index: 100;

		}		
	
		.calc_listovka .cell .cell_inner{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 50;			
		}
	
			.calc_listovka .cell .cell_inner .label{
				float: left;
				width: 200px;
			}
			
			.calc_listovka .cell .cell_inner...

JavaScript

(function (){
	var	plotnost = undefined,
		format = undefined,
		type = undefined,
		tiraj = undefined
		
	// selection of option
	$('.calc_listovka .button_4_1').on('change', function(){
		$(this).find('option').attr('data-switch', '0');
		
		$(this).find('option:selected').attr('data-switch', '1');
		
		$('.calc_listovka .cell_5_shadow, .calc_listovka .cell_5, .calc_listovka .cell_7_shadow').css('display', 'none');
		
		$('.calc_listovka .cell_6').css('display', 'block');
		
		tiraj = $('.calc_listovka .cell_4_inner option[data-switch="1"]').val();
		console.log(tiraj);
	});			

	// selection of buttons
	$('.calc_listovka .cell_1_inner .cell_button, .calc_listovka .cell_2_inner .cell_button, .calc_listovka .cell_3_inner .cell_button').on('click', function(){
		var	self = $(this);
		
		$(this).closest('.body').find('.cell_button').removeClass('active').attr('data-switch', '0');
		
		self.addClass('active').attr('data-switch', '1');
		
		// deleting next opacity bg
		self.closest('.cell').next().find('.cell_shadow').css('display', 'none');
		
		// query_array fill
		plotnost = $('.calc_listovka .cell_1_inner .cell_button[data-switch="1"]').attr('data-serial');
		format = $('.calc_listovka .cell_2_inner .cell_button[data-switch="1"]').attr('data-serial');
		type = $('.calc_listovka .cell_3_inner .cell_button[data-switch="1"]').attr('data-serial');
	});
	
	console.log(plotnost, format, type, tiraj);
	

	
	
})();