Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button?
I attempted to create an event for each button to add a task for the corresponding div of that particular section, but I struggled to implement it. Any solutions for this?
This is the HTML structure:
<section id="1" class="1">
<div id="div1" class="add-input-label">
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-1">Test</label>
</div>
<div id="btn-div-1" class="btn-div-1">
<input type="text" id="input-text-1">
<button id="btn-1" class="btn-add">Add</button>
</div>
</section>
<section id="2" class="2">
<div id="div2" class="add-input-label">
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-2">Test</label>
</div>
<div id="btn-div-2" class="btn-div-2">
<input type="text" id="input-text-2">
<button id="btn-2" class="btn-add">Add</button>
</div>
</section>
And here is the Javascript code:
const btn = document.querySelectorAll('.btn-add');
const div = document.querySelectorAll('.add-input-label');
btn.forEach((btn) => {
btn.addEventListener('click', () => {
div.forEach((div) => {
let label = document.createElement('label');
let input = document.createElement('input');
div.appendChild(input);
div.appendChild(label);
label.innerText = 'hey';
input.type = 'checkbox';
});
});
});
Upon clicking the button, the task is added to both sections. How can I make it so that only the specific section is affected when its respective button is clicked?