JSFiddle - React, Tailwind, and code Playground

HTML

<div class="step">
    <input type="input" name="amount" maxlength="3" size="3" />
    <div class="b">
            <span class="up">&#9652;</span>
            <span class="down">&#9662;</span>
    </div>
</div>

CSS

.step input {
    font-size: 24px;
    float:left;
    width:100px;
    height: 31px;
}
.step .b {
     float:left;
     height:30px;
}
.step span.up, .step span.down {
    font-size:15px;
    line-height: 15px;
    height: 15px;
    width:20px;
    display: block;
    cursor:pointer;
    text-align:center;
    border: 1px solid #ccc;
    border-bottom-color:#aaa;
    border-top-color: #eee;
    background-color: #ddd;
}
.step span:hover {
    color: #777;
    background-color: #eee;
}

JavaScript

$(document).ready(function(){
    $("span.up").click(function(){
       $(this).closest("div.step")
           .find("input")
           .val((Number($(this).closest("div.step").find("input").val())+1));
    });
        $("span.down").click(function(){  
            $(this).closest("div.step")
                .find("input")
                .val((Number($(this).closest("div.step").find("input").val())-1));
    });
});