JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:700px;background:#f3f3f3;top: 38px;left: 50%;margin-right: -50%;transform: translate(-50%, 0%);position: absolute;padding: 15px;height: 400px;">
<div class="kor" style="width:360px; height:200px; border:1px black solid;position: absolute;top: 15px;right: 15px;/*display:none;*/"></div>



<div class="block">
<span class="tName">Майка красная</span> (<span class="tPrice">100р</span>)<br />
<a href="#" class="tAdd">Добавить в корзину</a>
</div>

<br />

<div class="block">
<span class="tName">Майка синяя</span> (<span class="tPrice">200р</span>)<br />
<a href="#" class="tAdd">Добавить в корзину</a>
</div>

<br />

<div class="block">
<span class="tName">Майка зеленая</span> (<span class="tPrice">300р</span>)<br />
<a href="#" class="tAdd">Добавить в корзину</a>
</div>

CSS

.block {
width: 200px;
background-color: white;
padding: 10px;
}
.kor .tName {
/*display: block;*/
height: 20px;
}
.kor .tPrice {
float: right;
height: 20px;
width: 258px;
text-align: right;
margin-top: -20px;
border-bottom: 1px solid black;
padding-right: 42px;
}
.openKor {
cursor: pointer;
background-color: red;
width: 40px;
height: 25px;
text-align: center;
position: absolute;
left: 312px;
}
.tAdded {
color:red;
}
.num1 {
border: 1px solid #c2c2c2;
width: 30px;
text-align: left;
margin-left: 10px;
}
.sum {
width: 30px;
border: none;
background: transparent;
text-align: right;
}
.tDel {
float: right;
margin-right: 10px;	
}
.korTBlock {
margin-bottom: 10px;	
}
.price-block {
right: 80px;
position: absolute;	
}

JavaScript

$('.tAdd').click(function(){

		var newContainer = $('<div class="korTBlock"></div>');
		var name = $(this).parent().find('.tName').clone();
		var strPrice = $(this).parent().find('.tPrice').text(); 
		var pri = Number(strPrice.substring(0, strPrice.length - 1)); 
		var price = $("<span class='price-block'><input type='text' name='num1' class='num1' value='1' /> <span> = </span> <input style='display:none' type='text' name='num2' class='num2' value='" + pri + "' readonly /><input type='text' name='sum' class='sum' readonly /> <span> р.</span></span>").appendTo($(".kor"));
		var del = $(" <a href='#' class='tDel'>Удалить</a>").appendTo($(".kor"));
		newContainer.append(name)
		newContainer.append(price);
		newContainer.append(del);
		$('.kor').append( newContainer );
		
		$('.tDel').click(function(){
			$(this).parent().remove();
		});
		
		
		(function(){
		sum();
		$(".num1, .num2").on("keydown keyup", function() {
		sum();
		});
		
		function sum() {
		var num1 = document.querySelector('.num1').value;
		var num2 = document.querySelector('.num2').value;
		var result = parseInt(num1) * parseInt(num2);
		if (!isNaN(result)) {
		document.querySelector('.sum').value = result;
		}
		}
		})();

				
    //$( this ).off( event );

});