JSFiddle - React, Tailwind, and code Playground

HTML

<div class="count">
    <button type="button" class="count__minus">-</button>
    <input type="text" class="count__field" value="1" placeholder="1">
    <button type="button" class="count__plus">+</button>
</div>
<div class="count">
    <button type="button" class="count__minus">-</button>
    <input type="text" class="count__field" value="" placeholder="1">
    <button type="button" class="count__plus">+</button>
</div>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.count {
    display: flex;
    padding: 10px;
}

.count__minus,
.count__plus {
    height: 40px;
    width: 40px;
    background: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 20px;
}

.count__field {
    height: 40px;
    padding: 5px 15px;
    width: 80px;
}

JavaScript

(function() {

    'use strict';

    window.onload = function() {

        function changeCount(count) {
            var countPlus = count.querySelector('.count__plus');
            var countMinus = count.querySelector('.count__minus');
            var countField = count.querySelector('.count__field');
            var countFieldValue = parseFloat(countField.value, 10);
			
            countMinus.addEventListener('click', function() {
                countFieldValue--;
            });
            countPlus.addEventListener('click', function() {
                countFieldValue++;
            });

        }
        var counts = document.querySelectorAll('.count');
        counts.forEach(changeCount);

    }

})();