JSFiddle - React, Tailwind, and code Playground

by Siva Charan

HTML

<div>
    <label for="how-many">Quantity</label> <span>
        <i class="substract-value">-</i>
        <input id="how-many" value="1"/>
        <i class="add-value">+</i>
    </span>

</div>

CSS

.substract-value, .add-value {
    cursor: pointer;
    padding: 2px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#how-many {
    width: 10px;
    text-align: center;
}

JavaScript

var obj = $('#how-many');
$('.substract-value').click(function () {
    var content = obj.val();
    if (content > 1) 
        obj.val(parseInt(obj.val()) - 1);
    obj.css("width", (obj.val().length * 10) + "px");
});
$('.add-value').click(function () {
    obj.val(parseInt(obj.val()) + 1);
    obj.css("width", (obj.val().length * 10) + "px");
});