JSFiddle - React, Tailwind, and code Playground

by mrKhatter

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title></title>
</head>
<body>
	<div class="overlay hide"></div>
	<nav>
		<a href="#burger">burger</a>
		<ul class="menu hide">
			<li><a href="#" class="subMenuOpen">1 +</a>
				<ul class="subMenu hide">
					<li><a href="#">1.1</a></li>
					<li><a href="#">1.2</a></li>
					<li><a href="#">1.3</a></li>
				</ul>
			</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#" class="subMenuOpen">5 +</a>
				<ul class="subMenu hide">
					<li><a href="#">1.1</a></li>
					<li><a href="#">1.2</a></li>
					<li><a href="#">1.3</a></li>
				</ul>
			</li>
			<li><a href="#">6</a></li>
			<li><a href="#">7</a></li>
			<li><a href="#">8</a></li>
		</ul>
		<a href="#search">search</a>
		<a href="#cabinet">cabinet</a>
		<a href="#cart">cart</a>
		<div class="searchBox hide">
			<input type="text" name="search" placeholder="Поиск..."><button name="btnSearch" id="btnSearch" type="submit">Искать</button>
		</div>
		<div class="cabinetBox hide">
			<input type="text" name="name" placeholder="имя">
			<input type="password" name="pass" placeholder="pass"><a href="#viewPass">viewPass</a>
			<button name="btnSignIn" type="submit">Войти</button>
			<button name="btnSignUp" class="hide" type="submit">Зарегистрироваться</button>
			<a href="#signUp">Зарегистрироваться</a>
			<a href="#signIn" class="hide">Войти</a>
		</div>
		<div class="cartBox hide">
			CARTBOX
		</div>
	</nav>
	<section class="sales">
		<div class="itemBox" data-aql="DS-1123">
			<img src="" alt="imgagesItem">
			<p>Title</p>
			<p>Description</p>
			<div class="priceBox">
				<div class="oldPrice">213p</div>
				<div class="price">100p</div>
			</div>
			<div class="buyBox">
				<a href="#minus" class="hide" data-aql="DS-1123">-</a>
				<input type="text" name="qut"...

CSS

html,body{padding: 0; margin: 0;}
		.active{display: inherit;}
		.overlay{background: rgba(0,0,0,.6);position: absolute;z-index: 1;width: 100%;height: 100%;}
		.menu,.searchBox,.cabinetBox,.cartBox{ width: auto; background: #fff;position: relative;z-index: 2;}
		.menu{position: absolute;}
		.hide{display: none;}

JavaScript

$('.cartBox').on('click','a[href="#delete"]',function(e){
  		console.log($(this).data('aqlitem'));
  		e.preventDefault();
  		$(this).parent().remove();
  		$('.sales>div[data-aql="'+$(this).data('aqlitem')+'"]>.buyBox>input[name="qut"]').val(0);
			$('.sales>div[data-aql="'+$(this).data('aqlitem')+'"]>.buyBox>input[name="qut"]').toggleClass('hide');
			$('.sales>div[data-aql="'+$(this).data('aqlitem')+'"]>.buyBox>a[href="#minus"]').toggleClass('hide');
			$('.sales>div[data-aql="'+$(this).data('aqlitem')+'"]>.buyBox>a[href="#toCart"]').text('toCart');
  	});
		$('a[href="#toCart"]').on('click',function(e){
			e.preventDefault();
			var parent = $(this).parent();
			console.log(parent[0].children);
			$(parent[0].children[0]).removeClass('hide');
			$(parent[0].children[1]).removeClass('hide');
			var qut = $(parent[0].children[1]).val();
			$(parent[0].children[1]).val(++qut);
			$(this).text('+');
			if($('.cartBox>.itemBox>p>span').text()==$(this).data('aql')){
				$('div[data-aqlItem="'+$(this).data('aql')+'"]>.price>b').text(qut++);
			}else{
			$('.cartBox').append('\
				<div class="itemBox" data-aqlItem="'+$(this).data('aql')+'">\
					<img src="'+$(this).data('img')+'" alt="imgagesItem">\
					<p>Title <span>'+$(this).data('aql')+'</span></p>\
					<div class="price"><b>'+qut+'</b> x '+$(this).data('price')+'p</div>\
					<a href="#delete" data-aqlItem="'+$(this).data('aql')+'">delete</a>\
				</div>\
			');
			}
		});
		$('a[href="#minus"]').on('click',function(e){
			e.preventDefault();
			var parent = $(this).parent();
			console.log(parent[0].children);
			$(this).removeClass('hide');
			$(parent[0].children[1]).removeClass('hide');
			var qut =...