Checkbox rows - slideUp complete issue

I have multiple divs of 3 checkboxes – each div has a show/hide button (jQuery slideUp) that hides the 'ul.task-list' to display the H2 heading.

<div class="row" id="row-0">
    <button class="toggle">Toggle</button>
    
    <h2>Row 0</h2>
    
    <ul class="task-list">
        <li><input type="checkbox" id="task-0-0" class="task" value="0" /></li>
        <li><input type="checkbox" id="task-0-1" class="task" value="1" /></li>
        <li><input type="checkbox" id="task-0-2" class="task" value="2" /></li>
    </ul>
</div>

<div class="row" id="row-1">
    <button class="toggle">Toggle</button>
    
    <h2>Row 1</h2>
    
    <ul class="task-list">
        <li><input type="checkbox" id="task-1-0" class="task" value="0" /></li>
        <li><input type="checkbox" id="task-1-1" class="task" value="1" /></li>
        <li><input type="checkbox" id="task-1-2" class="task" value="2" /></li>
    </ul>
</div>

I call a 'checkTotal' function, and if everything in the row is checked, add the class of "complete" and slideUp the UL.

let sections = $('.row').map(function() { return this.id }).get(); // gets id of row

const tasksTotal = 3; // the total checkboxes in each row

function checkTotal() {
    sections.forEach(function(i) { // loops section IDs
        let total = $('#'+i+' input:checked').length; // checked in row
        total == tasksTotal ? ($('#'+i).addClass('complete'), $('#'+i+' .task-list').slideUp()) : ($('#'+i).removeClass('complete')); // add class & hide row
    });
}

checkTotal();

The issue is, if I click to show row 0 (after complete) and then check anything in row 1 – it will automatically slide row 0 up again – as complete remains true (all items are checked).

I just can't figure out how to separate these, so they act independently and without looping through again.