JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="items">
        <div class="item-1">
            <p class="title">Первое</p>
            <p class="price">200</p>
            <p class="minus">-</p>
            <p class="count">1</p>
            <p class="plus">+</p>
            <p class="add">Добавить</p>
        </div>
        <div class="item-2">
            <p class="title">Второе</p>
            <p class="price">100</p>
            <p class="minus">-</p>
            <p class="count">2</p>
            <p class="plus">+</p>
            <p class="add">Добавить</p>
        </div>
    </div>
    <div id="cart">
        <form action="#">
            <input type="text" name="blud" id="blud" placeholder="кол. блюд"/>
            <input type="text" name="summ" id="summ" placeholder="цена"/>
        </form>
        <div id="info"></div>
    </div>      
</div>

CSS

#wrapper{
    width: 405px;
    float: left;
}
#items{
    overflow: hidden;
    text-align: center;
}
div[class^=item-]{
    float: left;
    width: 200px;
    margin-right: -1px;
    border: 1px solid #333;
}
.add{
    color: #fff;
    background: #000;
    padding: 10px 0px;
    cursor: pointer;
}
div[class^=cart-item]{
    line-height: 1;
    margin: 20px;
    text-align: center;
}
div[class^=cart-item] span{
    display: block;
}
form{
    width: 270px;
    margin: auto;
    overflow: hidden;
}
input {
    width: 100px;
    border: 1px solid #333;
    padding: 0 6px;
    margin: 10px;
    float: left;
}
.plus, .count, .minus{
    display: inline-block;
    width: 20%;
}
.plus, .minus{
    background: #444;
    color: #FFF;
    border: 2px solid #000;
    cursor: pointer;
}

JavaScript

$(".plus").click(function() {
    var nc = parseInt($(this).parent("div").children('.count').text())+1;
    $(this).parent("div").children('.count').text(nc);
});
$(".minus").click(function() {
    var mc = parseInt($(this).parent("div").children('.count').text())-1;
    $(this).parent("div").children('.count').text(mc);
});


$(".add").click(function() {
    var th = $(this);
    var parCl = $("div[class^=item-]");
    // Получаем ид из класса
    var classNum = parseInt(th.parent(parCl).attr('class').replace(/\D+/g,""));
    // Помещяем все данные в соответствующие переменные
    var title = th.parent(parCl).children('.title').text();
    var price = parseInt(th.parent(parCl).children('.price').text());
    var count = parseInt(th.parent(parCl).children('.count').text());
    // Считаем первоначальную сумму
    var elemSumm = price*count;
    // Получаем сумму из инпута для последующего увеличения
    var mainSumm = parseInt(($("#summ").val()+0)/10);
    // Проверяем помещена ли позиция в корзину
    if($("div").is(".cart-item-"+classNum)){
        // Если да получаем колиество из уже существующего класса
        var newCount = parseInt($(".cart-item-"+classNum+" .cart-count").text());
        var countOut = count + newCount;
        $(".cart-item-"+classNum+" .cart-count").text(countOut)
        // Увеличиваем сумму
        var mainSummOut = mainSumm + elemSumm;
        $("#summ").val(parseInt(mainSummOut));
    }
    else{
        // Если нет добавляем
        $("#info").append("<div class='cart-item-"+classNum+"'><span class=\"cart-title\">"+title+"</span><span class=\"cart-price\">"+price+"</span><span class=\"cart-count\">"+count+"</span><div class=\"spoiler\"></div></div>");
        // Увеличиваем значение суммы
        var mainSummOut = mainSumm + elemSumm;
        $("#summ").val(parseInt(mainSummOut));
    }
    // Считаем и выводим количество уникальных позиций
    var blud = $("div[class^=cart-item-]").length;
    $("#blud").val(blud);
});