Hola soy nuevo en JavaScript y se me ha hecho un poco complicado el aprenderlo.
Estoy intentando hacer un contador, de manera que, al presionar al botón de Add Button me permita agregar un contador independiente, sin embargo no entiendo como puedo hacer para que este me pueda funcionar de manera independiente, o sea, quiero poder hacer que los dos contadores al darle Increase o Decrease se reduzca o incremente ÚNICAMENTE en ese contador. ¿Cómo podría hacerlo?, lo intenté con el cloneNode() pero no se me ocurre cómo hacer para que funcionen de manera independiente.
HTML
<!-- Add & Remove -->
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-primary m-2" onclick="addCounter()">
Add Counter
</button>
<button type="button" class="btn btn-danger m-2" onclick="removeCounter()">
Remove Last Counter
</button>
</div>
</div>
<!-- Counters Container-->
<div class="d-flex flex-row justify-content-evenly" id="counterContainer">
<div class="borderedCounter m-3" id="counter">
<h5 class="card-title">Counter JavaScript - #<span id="numCounter">1</span></h5>
<div class="container-fluid mt-4">
<h1 class="text-success" id="valueCounter">0</h1>
</div>
<div class="row mt-4">
<div class="col-12 mt-2">
<button type="button" class="btn btn-outline-primary" onclick="increaseCounter()">
<i class="fa-solid fa-plus"></i> Increase
</button>
<button type="button" class="btn btn-outline-primary" onclick="resetCounter()">
<i class="fa-solid fa-arrows-rotate"></i> Reset
</button>
<button type="button" class="btn btn-outline-primary" onclick="decreaseCounter()">
<i class="fa-solid fa-minus"></i> Decrease
</button>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT
valueCounter = 0;
function updateValueCounter() {
document.getElementById("valueCounter").innerHTML = valueCounter;
}
function increaseCounter() {
updateValueCounter(++valueCounter);
}
function decreaseCounter() {
updateValueCounter(--valueCounter);
}
function resetCounter() {
updateValueCounter(valueCounter = 0);
}
function addCounter() {
let counter = document.getElementById("counter")
let cloneCounter = counter.cloneNode(true);
document.getElementById("counterContainer").appendChild(cloneCounter);
}
function removeCounter() {
let counter = document.getElementById("counterContainer");
counter.removeChild(counter.lastChild);
}