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 cómo 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.
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);
}
<div class="container-fluid text-center principalContainer">
<!-- 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>