uncheck child checkboxes in another groups when checking multiple child checkboxes in current group

I have created a parent child checkbox setup. When the parent checkbox is checked, the child checkboxes will be visible where multiple checkboxes can be checked.

But I want to uncheck the child checkboxes in the other groups. So you are only allowed to check multiple checkboxes in a certain group at a time. As I only want to save a subgroup of checkbox values.

See setup below for the parent child checkbox setup

<ul class="acf-checkbox-list acf-bl">
<li data-id="354"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="354"> <span>topic 1</span></label><ul class="children acf-bl" style="display: block;">
<li data-id="377"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="377"> <span>subtopic a </span></label></li>
<li data-id="361"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="361"> <span>subtopic  b</span></label></li>
<li data-id="366"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="366"> <span>subtopic  c</span></label></li>
</ul>
</li>
<li data-id="372"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="372"> <span>topic 2</span></label><ul class="children acf-bl">
<li data-id="389"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="389"> <span>subtopic x</span></label></li>
<li data-id="399"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="399"> <span>subtopic  y</span></label></li>
</ul>
</li>
<li data-id="373"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="373"> <span>Topic 3</span></label><ul class="children acf-bl">
<li data-id="410"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="410"> <span>subtopic 1</span></label></li>
<li data-id="412"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="412"> <span>subtopic 2 </span></label></li>
<li data-id="409"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="409"> <span>subtopic 3</span></label></li>
</ul>
</li>
</li>
</ul>

const checkbox = document.querySelectorAll('.acf-checkbox-list > li > label > input');
checkbox.forEach(function(checkitem){
var value = checkitem.value;
checkitem.addEventListener('click', (event) => {
const parentli = document.querySelector('[data-id="'+value+'"]').querySelector('.children');
if (checkitem.checked) {
parentli.style.display = "block";
}
else {
parentli.style.display = "none";
}
})
});

.children {
  
  display:none;
}

Thank in advance!