JSFiddle - React, Tailwind, and code Playground

HTML

<div class="number">
    <span class="minus">-</span>
    <input type="text" value="1 кг" size="5"/>
    <span class="plus">+</span>
</div>

CSS

span {cursor:pointer; }
		.number{
			margin:100px 30%;
		}
		.minus, .plus{
			width:10px;
			height:10px;
			background:#f2f2f2;
			border-radius:4px;
			padding:3px 5px 3px 5px;
			border:1px solid #ddd;
		}
		input{
			height:24px;
			border:1px solid #ddd;
			border-radius:4px;
			padding:0 2px;
		}

JavaScript

$(document).ready(function() {
			$('.minus').click(function () {
				var $input = $(this).parent().find('input');
				var count = parseInt($input.val()) - 1;
				count = count < 1 ? 1 : count;
				$input.val(count + ' кг');
				$input.change();
				return false;
			});
			$('.plus').click(function () {
				var $input = $(this).parent().find('input');
				$input.val(parseInt($input.val()) + 1 + ' кг');
				$input.change();
				return false;
			});
		});