JSFiddle - React, Tailwind, and code Playground

HTML

<script src="ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<body>
Rezervační systém KdePosedět.cz<br>
<input id="nacistData" name="nacistData" type="button" value="Načíst data">
<br>
provozovatel: <span id="provozovatel"></span> <br>
<div id="rezervace-kontejner">
	<div id="rezervace">
		<div id="prehled"></div>
		<div id="planek">
			<div id="ovladani">
				<div id="novepatro" class="tlacitkoovladani"></div>
				<div id="pridanipatra" class="nabidka">
					<div class="zarovnaninabidky">
						<h3>PŘIDAT PATRO</h3>
						<p> jméno patra</p>
						<p>
							<input id="jmenopatra" type="text" size="15">
						</p>
						<p>úroveň patra
							<select id="urovenpatra">
								<option>-2</option>
								<option>-1</option>
								<option>0</option>
								<option>1</option>
								<option>2</option>
								<option>3</option>
							</select>
						</p>
						<p>rozměry (cm)</p>
						<p>
							<input id="sirkapatra" value="200" type="text" size="3">
							<input id="delkapatra" value="200" type="text" size="3">
						</p>
						<p>
							<input id="pridatpatro" class="pridat" type="button" value="Přidat">
						</p>
					</div>
				</div>
				<div id="novamistnost" class="tlacitkoovladani"></div>
				<div id="pridanimistnosti" class="nabidka">
					<div class="zarovnaninabidky">
						<h3>PŘIDAT MÍSTNOST</h3>
						<p>jméno místnosti</p>
						<p>
							<input id="jmenomistnosti" type="text" size="15">
						</p>
						<p>rozměry (cm)</p>
						<p>
							<input id="sirkamistnosti" value="100" type="text" size="3">
							<input id="delkamistnosti" value="200" type="text" size="3">
						</p>
						<p>
							<input id="pridatmistnost" class="pridat" type="button" value="Přidat">
						</p>
					</div>
				</div>
				<div id="novystul" class="tlacitkoovladani"></div>
				<div id="pridanistolu" class="nabidka">
					<div class="zarovnaninabidky">
						<h3>PŘIDAT STŮL</h3>
						<p>jméno stolu</p>
						<p>
							<input...

CSS

@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* konec resetu-------------
*/

body {
	font-family: Arial, Helvetica, sans-serif;
}
#rezervace-kontejner {
	position: absolute;
	width: 100%;
	height:auto;
	background-color: #CCC;
	min-height: 500px;
}
#rezervace {
	position: absolute;
	top: 5px;
	height:auto;
	left: 5px;
	bottom: 5px;
	right: 5px;
	background-color: #FFF;
	border-radius: 5px;
}
#prehled {
	position: absolute;
	width: 40%;
	top: 5px;
	left: 5px;
	bottom: 5px;
	background-color: #CCC;
}
#planek {
	position: absolute;
	width: 58%;
	top: 5px;
	float: none;
	right: 5px;
	bottom: 5px;
	background-color: #CCC;
}

#prostory {
	top: 50px;
	
	width: 100%;
	
	
	background-color: red;
}
#ovladani {
	position: absolute;
	height: 50px;
	top: 0px;
	width: 100%;
	background-color: #333333;
}
#novystul {
	width: 40px;
	height: 40px;
	background-image: url(img_grafika/stul.png);
	background-repeat:...

JavaScript

$(function () {

    var data = {
        nazevRestaurace: "Café Imperial",
        provozovatel: "Zdeněk Pohlreich",
        pocetMist: 0,
        pocetStolu: 0,
        plocha: 60,
        patra: [],
        pocetPater: 0,
        stoly: []

    };

    $(".nabidka").hide();

    $("#nacistData").click(function () {
        $("#provozovatel").html(data.provozovatel + "<br>Podnik: " + data.nazevRestaurace + "<br>Počet míst: " + data.pocetMist + "<br>Počet stolu: " + data.pocetStolu + "<br>Počet pater: " + data.pocetPater);


    })


    $("#novepatro").click(function () {
        $(".nabidka").not("#pridanipatra").hide();
        $("#pridanipatra").slideToggle("fast");
        $(this).toggleClass("aktivniovladani");

    })

    $("#novamistnost").click(function () {
        $(".nabidka").not("#pridanimistnosti").hide();
        $("#pridanimistnosti").slideToggle("fast");
        $(this).toggleClass("aktivniovladani");

    })

    $("#novystul").click(function () {
        $(".nabidka").not("#pridanistolu").hide();
        $("#pridanistolu").slideToggle("fast");
        $(this).toggleClass("aktivniovladani");

    })

    //prida patro
    $("#pridatpatro").click(function () {
        var novePatro = {
            idPatra: 1020,
            jmenoPatra: $("#jmenopatra").val(),
            patroDelka: $("#delkapatra").val(),
            patroSirka: $("#sirkapatra").val(),
            pomer: 0,
            podnik: data.nazevRestaurace,
            uroven: $("#urovenpatra").val()
        };
        pridatPatro(novePatro);
    })

    function velikostPatra(delka, sirka, idpatra) {
        var delkaPatra, sirkaPatra, patroObject;
        console.log(idpatra);
        delkaPatra = parseInt($("#patro" + idpatra).css("width"));
        console.log(delkaPatra);
        sirkaPatra = delkaPatra * (sirka / delka);

        console.log(sirkaPatra);
        console.log(sirka / delka);
        patroObject = {};
        patroObject.pomer = (sirka / delka);
       ...