JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="reg">
			<form method="post" action="">
				<label for="username">ФИО</label>
				<input type="text" name="username" placeholder="Введите ФИО"><br>
				<label for="address">Адрес доставки</label>
				<input type="text" name="address" placeholder="Введите адрес доставки"><br>
				<label for="phone">Номер телефона</label>
				<input type="text" name="phone" placeholder="Введите свой номер телефона"><br>
				<label for="product">Выберите товар</label>
				<select id="product" size="1" name="productList"><br>
					<option disabled>Выберите товар</option>
					<option value="1" data-price="1200"> Стул </option>
					<option value="1" data-price="100"> Стол </option>
					<option value="1" data-price="11200"> Табуретка </option>
				</select>
				<label for="number">Выберите количество товара</label>
				<input id="count" type="text" name="number" placeholder="Введите количество товара"><br>
				Стоимость:<div id="productPrice"></div>
				<button id="addProduct">Добавить</button>
	
			</form>
		</div>
		<div id="list">
			<div class="item">
				<span class="title"></span>
				<span class="price"></span>
				<span class="count"></span>
			</div>
        </div>

CSS

#reg {
	width:300px;
	height:400px;
	border:1px solid black;
	margin:auto;
	position:relative;
	top:25%;
	border:1px solid white;
	box-shadow: 9px 14px 61px -5px rgba(0,0,0,0.4);
	clear:both;
	z-index:900;
}
form {
	position:absolute;
	left:6%;
	bottom:1px;
	padding:5px;
	color:gray;
}
form input {
	padding:5px;
	width:250px;
	margin-bottom:15px;
	border:1px solid lightgray;
	outline:none;
}
form input[type="submit"] {
	background: #F44336;
	border:none;
	color:white;
	height:30px;
	padding: .3em 1.5em;
}
form input[type="submit"]:hover {
	transition:.3s;
	background:#EF9A9A;
}
form select {
	margin-bottom:15px;
	width:135px;
	padding:4px;
	border:1px solid lightgray;
}
#list{
	color:gray;
	position:absolute;
	left:70%;
	top:250px;
	width:300px;
	height:380px;
	padding:10px;
	box-shadow: 9px 14px 61px -5px rgba(0,0,0,0.4);
}
.item {
	height:30px;
}

JavaScript

$(function() {
	/*var calcCost=function() {
		var productCount=parseInt($("#count").val()),
			productPrice=parseInt($("#product *:selected").data("price")),
			totalCost=productCount*productPrice;
		$("#productPrice").text(totalCost);
	};
	$("#product").on("change", calcCost);
	$("#count").on("change", calcCost);*/
	
	$("#addProduct").on('click',function(){
		
		$("<span></span>").appendTo("#list");
		
		var productName=$("#product").val();
		productPrice=parseInt($("#product *:selected").data("price")),
		productName=parseInt($("#product *:selected").text());
		
		$("<div></div>").addClass("item").append('<span class="title">'+productName+'</span>').
		append('<span class="price">'+productPrice+'</span>').append('<span class="count">1</span>').
		appendTo('#list');
        alert('stop')
	});
	
	/*$( "#plus" ).click(function() {
		document.getElementById('counter').innerHTML=parseInt(document.getElementById('counter').innerHTML)+1;
	});
	$( "#minus" ).click(function() {
		document.getElementById('counter').innerHTML=parseInt(document.getElementById('counter').innerHTML)-1;
	});
	*/
});