Вот такая структура будет нормальная, тут просто структура верстки.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
font-size: 1.2rem;
font-family: 'Courier New', Courier, monospace;
font-weight: 900;
}
.calculator {
max-width: 320px;
margin: 0px auto 0px;
display: flex;
flex-direction: column;
}
.total_amount {
max-width: 320px;
margin: 20px auto 20px;
color: #F288B4;
}
.level_one {
color: #946FF2;
padding: 10px 0px 10px 10px;
margin: 0px 0px 20px 0px;
border-left: solid 1px #946FF2;
}
.sum_all_level_one {
display: block;
padding: 0px 0px 2px 0px;
}
.num_level_one {}
.level_two {
color: #F47B5E;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #F47B5E;
}
.num_level_two {}
.level_three {
color: #F2C463;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #F2C463;
}
</style>
</head>
<body>
<div class="total_amount">
16 000
</div>
<div class="calculator">
<div class="level_one">
<label class="sum_all_level_one">
<span class="num_level_one">
8 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
4 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<label class="number">
<span class="num_level_two">
4 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
</div>
<div class="level_one">
<label class="sum_all_level_one">
<span class="num_level_one">
8 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
2 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
<div class="level_two">
<label class="number">
<span class="num_level_two sum_all_level_two">
6 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<div class="level_three">
<label class="number">
<span class="num_level_two">
3 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
<label class="number">
<span class="num_level_two">
3 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
</div>
</div>
</div>
</div>
<script>
const calculator = document.querySelector('.calculator');
const levelOne = document.querySelector('.level_one');
calculator.addEventListener('change', function ({
target
}) {
console.log(target);
console.log(target.className);
if(target.classList.contains("level__1")){
console.log("Клик level_one");
let levelOneChildren = target.querySelectorAll(".level_two")
// let levelOneChildren = levelOne.childNodes
// let levelOneChildren = levelOne.children
console.log(levelOneChildren)
}
})
</script>
</body>
</html>