JSFiddle - React, Tailwind, and code Playground
HTML
<div class="item-buttons">
<div class="group-buttons">
<button class="btn green minus">-</button>
<input class="btn-input item-count" type="text" value="1">
<button class="btn green plus">+</button>
</div>
<div>
<input class="btn green add-to-cart" type="button" data-id="1" data-action= "addToBasket" value="В корзину" >
</div>
<div class="group-buttons">
<button class="btn green minus">-</button>
<input class="btn-input item-count" type="text" value="1">
<button class="btn green plus">+</button>
</div>
<div>
<input class="btn green add-to-cart" type="button" data-id="2" data-action= "addToBasket" value="В корзину" >
</div>
</div>
CSS
body {
width: 20%;
}
.item-buttons {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.item-buttons .btn-input {
width: 30px;
text-align: center;
font-size: 15px;
background: #f8f8f8;
border: 1px solid #bfbbbb;
}
.group-buttons {
display: flex;
margin: 20px 0;
}
.btn {
padding: 7px 12px;
color: white;
border: 0;
cursor: pointer;
text-shadow: none;
transition: all .3s;
background: #000;
}
JavaScript
$('.minus').on('click', function() {
$input = $(this).parent().find('input');
$count = parseInt($input.val()) - 1;
$count = $count < 1 ? 1 : $count;
$input.val($count);
$input.change();
return false;
});
$('.plus').on('click',function() {
var $input = $(this).parent().find('input');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
/*добавляю товар в корзину*/
$('.add-to-cart').on('click',function() {
id = $(this).attr('data-id');
addToBasket = $(this).attr('data-action');
$.ajax({
type: 'POST',
url: 'cart.php',
data: { id : id, action: addToBasket},
success:function (data) {
$('.cart-content').html(data);
},
});
return false;
});