схема зала

by George Bash

HTML

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
<h2>Клиент зала</h2>
<form action="" method="post" id="form1">
<input type="text" name="name" placeholder="Ваше ФИО">
<br><br><hr>

<h2>Схема зала</h2>
<div class="sheme">
<div class="reid">
<p class="columname coleft">4<br>ряд</p>
<p class="leftside ls1"><input type="checkbox" name="pack[]" id="4l1" value="Ряд 4 - Место 1"><br>(1)</p>
<p class="leftside ls2"><input type="checkbox" name="pack[]" id="4l2" value="Ряд 4 - Место 2"><br>(2)</p>
<p class="leftside ls3"><input type="checkbox" name="pack[]" id="4l3" value="Ряд 4 - Место 3"><br>(3)</p>
<p class="leftside ls4"><input type="checkbox" name="pack[]" id="4l4" value="Ряд 4 - Место 4"><br>(4)</p>
<p class="leftside ls5"><input type="checkbox" name="pack[]" id="4l5" value="Ряд 4 - Место 5"><br>(5)</p>
<p class="centerside"><input type="checkbox" name="pack[]" id="4c6" value="Ряд 4 - Место 6"><br>(6)</p>
<p class="centerside"><input type="checkbox" name="pack[]" id="4c7" value="Ряд 4 - Место 7"><br>(7)</p>
<p class="centerside"><input type="checkbox" name="pack[]" id="4c8" value="Ряд 4 - Место 8"><br>(8)</p>
<p class="centerside"><input type="checkbox" name="pack[]" id="4c9" value="Ряд 4 - Место 9"><br>(9)</p>
<p class="centerside"><input type="checkbox" name="pack[]" id="4c10" value="Ряд 4 - Место 10"><br>(10)</p>
<p class="centerside"><input type="checkbox" name="pack[]" id="4c11" value="Ряд 4 - Место 11"><br>(11)</p>
<p class="centerside"><input type="checkbox" name="pack[]" id="4c12" value="Ряд 4 - Место 12"><br>(12)</p>
<p class="centerside"><input type="checkbox" name="pack[]" id="4c13" value="Ряд 4 - Место 13"><br>(13)</p>
<p class="centerside"><input type="checkbox" name="pack[]" id="4c14" value="Ряд 4 - Место 14"><br>(14)</p>
<p class="centerside"><input type="checkbox" name="pack[]" id="4c15" value="Ряд 4 - Место...

CSS

.sheme {margin: 0 auto;width: min-content;}
.reid {
	display: flex;
    margin: 10px 0;
}
.reid p {
	text-align: center;
    margin: 0 5px;
    padding: 0px;
    font-size: 12px;
    width: 30px;
    height: 36px;
}
.columname {
	padding: 10px 10px 0px 10px !important;
    font-weight: bold;
	margin-top: 150px !important;
}
.coleft {
	border-right: 1px solid #f00;
}
.coright {
	border-left: 1px solid #f00;
}
.reid .ls1,.reid .ls2,.reid .ls3,.reid .ls4,.reid .ls5,.reid .rs1,.reid .rs2,.reid .rs3,.reid .rs4,.reid .rs5 {background: #aad39f;}
.reid .centerside {background: #d3be9f;}

.reid .ls1 {margin-top: 150px;background: #aad39f;}
.reid .ls2 {margin-top: 120px;}
.reid .ls3 {margin-top: 90px;}
.reid .ls4 {margin-top: 60px;}
.reid .ls5 {margin-top: 30px;}
.reid .centerside {}
.reid .rs1 {margin-top: 30px;}
.reid .rs2 {margin-top: 60px;}
.reid .rs3 {margin-top: 90px;}
.reid .rs4 {margin-top: 120px;}
.reid .rs5 {margin-top: 150px;}
.sideup {
	margin-top: -150px;
}

JavaScript

$(function() {
    $("#form1").on("input change", function() {
        var data = $(this).serializeArray(), obj ={};
        $.each(data, function(i, el) {
            var cls = "."+el.name, val = el.value;
            if(/\[\]/.test(cls)) {
               cls = cls.slice(0,-2);
               obj[cls] !== undefined ? obj[cls].push(val) : (obj[cls] = [val]);
               val = obj[cls].join(" | ");
            }
            $(cls).html(val);
        });
    })
});