JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label for="how-many">Quantity</label>
    <span>
        <i class="substract-value">-</i>
        <span id="how-many">1</span>
        <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 {
    text-align: center;
    border: 1px solid #000;
    border-radius: 2px;
    padding: 3px 5px;
    
}

JavaScript

$('.substract-value').click(function(){
    val = $('#how-many').val();
    if (val == 1) { }
    else
        $('#how-many').val(val-1);
});
$('.add-value').click(function(){
    val = $('#how-many').text();
    $('#how-many').text(parseInt(val)+1);
});