JSFiddle - React, Tailwind, and code Playground

by JOEHOELLER

HTML

<ul id="parent-list">
        <li id="post-1">Item 1
            <div id="num"> 4 </div>
            <button onclick="add()" class="add">+</button>
            <button onclick="sub()" class="subtract">-</button>
        </li>
        <li id="post-2">Item 2
        <div id="num"> 8 </div>
            <button onclick="add()" class="add">+</button>
            <button onclick="sub()" class="subtract">-</button>
        </li>
        <li id="post-3">Item 3
        <div id="num"> 10 </div>
            <button onclick="add()" class="add">+</button>
            <button onclick="sub()" class="subtract">-</button>
        </li>
        <li id="post-4">Item 4
            <div id="num"> 4 </div>
            <button onclick="add()" class="add">+</button>
            <button onclick="sub()" class="subtract">-</button>
        </li>
        <li id="post-5">Item 5
            <div id="num"> 4 </div>
            <button onclick="add()" class="add">+</button>
            <button onclick="sub()" class="subtract">-</button>
        </li>
        <li id="post-6">Item 6
            <div id="num"> 4 </div>
            <button onclick="add()" class="add">+</button>
            <button onclick="sub()" 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 addHelper() {
    var a = document.getElementById("num").childNodes[0].nodeValue;
    this.noc = parseInt(a);
    console.log(this.noc)
}
function add() {
    document.getElementById("num").childNodes[0].data = 1 + this.noc++;
    subHelper();
}

function subHelper() {
    var b = document.getElementById("num").childNodes[0].nodeValue;
    this.con = parseInt(b);
    console.log(this.con);
}

function sub() {
    document.getElementById("num").childNodes[0].data = this.con-- - 1;
    addHelper();
}
subHelper();addHelper();

/* EVENT DELEGATION SCRIPT
var theParent = document.querySelector("#theDude");
theParent.addEventListener("click", doSomething, false);
 
function doSomething(e) {
    if (e.target !== e.currentTarget) {
        var clickedItem = e.target.id;
        alert("Hello " + clickedItem);
    }
    e.stopPropagation();
}
*/