When I click on the checkbox it alerts all title inside the div's. I need it only to alert the title inside the div that I click on. I hope that any one can help me with javascript code (not jquery)
var serviceChecked = document.querySelectorAll('.checkbox__toggle');
var serviceTitle = document.querySelectorAll('.serveTitle');
serviceChecked.forEach(function(listItem) {
listItem.addEventListener('click', function(e) {
for (var t = 0; t < serviceTitle.length; t++) {
alert(serviceTitle[t].innerText);
}
});
});
<div class="checkdivwrp">
<div class="checkwrp">
<input class='checkbox__toggle' type='checkbox'>
</div>
<div class="titlewrp">
<div class="serveTitle">title 1</div>
</div>
</div>
<div class="checkdivwrp">
<div class="checkwrp">
<input class='checkbox__toggle' type='checkbox'>
</div>
<div class="titlewrp">
<div class="serveTitle">title 2</div>
</div>
</div>
<div class="checkdivwrp">
<div class="checkwrp">
<input class='checkbox__toggle' type='checkbox'>
</div>
<div class="titlewrp">
<div class="serveTitle">title 3</div>
</div>
</div>