JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="bileti30.css">
	<script src="lesson30.js"></script>
	<script src="https://kit.fontawesome.com/c0a4c8df11.js" crossorigin="anonymous"></script>
	<title>Java</title>
</head>
<body>
	<div id="vsplivayka">
		<div class="even_footer flex">
			<div class="width_20"></div>
			<div class="width_60">
				<div class="vsplivayka_footer">	
					<i id="marker" onclick="close_vsplivayka()">x</i>
					<ul class="ul_bottom">
						<li>Сумма вашего заказа:</li>
						<li id="itog_zakaz" class="inline_bl">0</li>
						<li class="inline_bl">UAH</li>
					</ul>
					<form>
						<div class="l_b">	
							<label>Имя</label>
							<input type="text" id="name" class="input_test">
						</div>
						<div class="l_b">			
							<label>Телефон</label>
							<input type="tel" value="+38" id="tel" class="input_test">
						</div>
					</form>
				</div>	
			</div>
			<div class="width_20"></div>
		</div>
	</div>
	<div id="osnovnoi">
		<div class="header_content">
			<h2 class="header_center">Покупка билетов</h2>
		</div>
		<div class="content">
			<div class="ticket_content">
				<div class="category_content">
					<h4>Категории</h4>
					<h4>Количество билетов</h4>
					<h4>Цена</h4>
				</div>
				<div class="category_content">
					<h4>Категория 1</h4>
					<div class="plus_minus">
						<i class="fa-solid fa-minus" onclick="minus(1)"></i>
						<input type="number" id="col_1" value="0">
						<i class="fa-solid fa-plus" onclick="plus(1)"></i>
						<span id="vivod_1" class="none">0</span>
					</div>
					<span id="cena_1">300</span>
				</div>
				<div class="category_content">
					<h4>Категория 2</h4>
					<div class="plus_minus">
						<i class="fa-solid fa-minus" onclick="minus(2)"></i>
						<input type="number" id="col_2" value="0">
						<i class="fa-solid fa-plus" onclick="plus(2)"></i>
						<span id="vivod_2" class="none">0</span>
					</div>
					<span...

CSS

/* ======================================= Обнуление ================================================= */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,  
form, fieldset, input, p, blockquote, table, th, td, embed, object { 
  padding: 0; 
  margin: 0;  
  } 
table { 
  border-collapse: collapse; 
  border-spacing: 0; 
  } 
fieldset, img, abbr { 
  border: 0; 
  } 
address, caption, cite, code, dfn, em,  
h1, h2, h3, h4, h5, h6, strong, th, var { 
  font-weight: normal; 
  font-style: normal; 
  } 
caption, th { 
  text-align: left; 
  } 
h2, h3, h4, h5, h6 { 
  font-size: 1.0em; 
  } 
q:before, q:after { 
  content: ''; 
  } 
a, ins { 
  text-decoration: none; 
  color: #000;
  }
h4{
  margin-left: 10px;
}
#vsplivayka li{
  list-style: none;
}
/* =======================================end Обнуление ================================================= */
body{
  font-family: cursive;
  font-size: 16px;
  background-color: #bfd8ef;
  color: #000;
}
.category_content input{
  width: 40%;
    text-align: center;
}
#osnovnoi{
  width:1170px;
  margin:0 auto;      /* контейнер по центру */
  padding:0 12px;
  box-sizing:border-box;
}

.header_center{
  text-align: center;
  padding-top: 70px;
  padding-bottom: 50px;
}

#osnovnoi h2{
  font-size: 25px;
}

#osnovnoi i{
  font-size: 14px;
  cursor: pointer;
}

.category_content{
  padding: 10px 25px 10px 25px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50%;
}

.inline{
  display: inline-block;
  list-style: none;
}

.right{
  margin-right: 430px;
}

#osnovnoi .inp_5{
  font-family: monospace;
  font-size: 16px;
  padding: 7px 16px 7px 16px;
  background: #bfd8ef;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.5s;
}

#osnovnoi .inp_5:hover{
  background: orange;
}

.ticket_price{
  margin-bottom: 20px;
  margin-top: 12px;
}
.none{
  display: none ;
}

.flex{
  display: flex;
}
.vsplivayka_footer{
  text-align: center;
  border: 1px...

JavaScript

function plus(parametr) {
	var col = 1*document.getElementById("col_"+parametr).value;
	var mycol = col + 1;
	document.getElementById("col_"+parametr).innerHTML = mycol;

	var cena = 1*document.getElementById("cena_"+parametr).innerHTML;
	var itog = 1*document.getElementById("vivod_"+parametr).innerHTML;

	itog = itog + cena;
	document.getElementById("vivod_"+parametr).innerHTML = itog;

	var total_itog = 1*document.getElementById("itog_ticket").innerHTML;
	var total = total_itog + cena;
	document.getElementById("itog_ticket").innerHTML = total;
	
}
function minus(parametr) {
	var col = 1*document.getElementById("col_"+parametr).value;
	var mycol = col - 1;
	if(mycol < 0){}
	else{
		document.getElementById("col_"+parametr).innerHTML = mycol;	
		
		var cena = 1*document.getElementById("cena_"+parametr).innerHTML;
		var itog = 1*document.getElementById("vivod_"+parametr).innerHTML;
		itog = itog - cena;
		
		document.getElementById("vivod_"+parametr).innerHTML = itog;

		var total_itog = 1*document.getElementById("itog_ticket").innerHTML;
		var total = total_itog - cena;
		document.getElementById("itog_ticket").innerHTML = total;
	}
}


function open_vsplivayka() {
	// body...
	var itog_raniwe = document.getElementById("itog_ticket").innerHTML;
	var itog_now = document.getElementById("itog_zakaz");
	if (itog_raniwe <= 0) {
		alert("Вы должны добавить товар")
	}
	else{
		var open = document.getElementById("vsplivayka").style.display = "block";
	}
	itog_now.innerHTML = itog_raniwe;
}


function close_vsplivayka() {
	// body...
	document.getElementById("vsplivayka").style.display = "none";
}