JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input-group">
                <span class="input-group-btn">
                    <button type="button" class="iLiter-left-minus btn btn-lg btn-info btn-number" data-type="minus" data-field="">-
                    </button>
                </span>
                <input type="number" id="iLiter" class="form-control input-number input-lg" value="0.4" min="0.1" max="10">
                <span class="input-group-btn">
                    <button type="button" class="iLiter-right-plus btn btn-lg btn-info btn-number" data-type="plus" data-field="">
                        +
                    </button>
                </span>
            </div>

JavaScript

$('.iLiter-right-plus').click(function (e) {
                e.preventDefault();
                var quantity = parseFloat($('#iLiter').val());
                if (quantity < 10.0) {
                    quantity = quantity + 0.1;
                    quantity = quantity.toFixed(2);
                    $('#iLiter').val(quantity);
                }
            });
            $('.iLiter-left-minus').click(function (e) {
                e.preventDefault();
                var quantity = parseFloat($('#iLiter').val());
                if (quantity > 0.1) {
                    quantity = quantity - 0.1;
                    quantity = quantity.toFixed(2);
                    $('#iLiter').val(quantity);
                }
            });