JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="parent-list">
        <li id="post-1">Item 1
            <div class="num"> 4 </div>
            <button class="add">+</button>
            <button class="subtract">-</button>
        </li>
        <li id="post-2">Item 2
            <div class="num"> 8 </div>
            <button class="add">+</button>
            <button class="subtract">-</button>
        </li>
        <li id="post-3">Item 3
            <div class="num"> 10 </div>
            <button class="add">+</button>
            <button class="subtract">-</button>
        </li>
        <li id="post-4">Item 4
            <div class="num"> 4 </div>
            <button class="add">+</button>
            <button class="subtract">-</button>
        </li>
        <li id="post-5">Item 5
            <div class="num"> 4 </div>
            <button class="add">+</button>
            <button class="subtract">-</button>
        </li>
        <li id="post-6">Item 6
            <div class="num"> 4 </div>
            <button class="add">+</button>
            <button class="subtract">-</button>
        </li>
    </ul>

CSS

ul {
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
    border: 1px solid black;
    padding: 10px;
    margin-bottom: 15px;
}

JavaScript

function updateFrom(button) {
    var num = button.parentNode.querySelector(".num");
    var value = parseInt(num.textContent, 10);
    var change = button.className === "add" ? 1 : -1;
    num.textContent = value + change;
}

var theParent = document.getElementById("parent-list");
theParent.addEventListener("click", doSomething, false);
 
function doSomething(e) {
    if (e.target.nodeName === "BUTTON") {
        updateFrom(e.target);
    }
}