Javascript for several elements in a PHP loop

I have created a HTML table where every row retrieves data from an sql database table.

?>
<div class="container">
    <h2>Activities</h2>
    <table class="table table-striped">
    <thead>
        <tr>
        <th scope="col">#</th>
        <th scope="col">Date</th>
        <th scope="col">Position</th>
        <th scope="col">Activity Type</th>
        <th scope="col">Edit</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $incremental=0;
        while($selRow=$res_selPostData->fetch_assoc()) {
            $incremental +=1;
            $filepath='.outputs\' . 'verbale' . $selRow['IDIntervento'] . '.pdf'; 
        ?>
            <tr>
                <td><?php echo $selRow['IDActivity']; ?></td>
                <td><?php echo $selRow['DateActivity']; ?></td>
                <td><?php echo $selRow['Position']; ?></td>
                <td><div id=<?php echo "TypeAct" . $incremental; ?>><?php echo $selRow['Activity_type']; ?></div></td>
                <td><div id=<?php echo "button" . $incremental; ?>><span id='edit'>EDIT</span></div></td>
            </tr>

        <?php
        }
        ?>
    </tbody>
    </table>
</div>

The last column of the HTML table contains for each row a ‘button’ which is connected to the following javascript function.

<script>
    window.onload = function() {
                var maximum=parseInt(<?php echo $incremental; ?>);
                for (let i = 1; i<maximum; i++) {
                    var makeMod = document.getElementById('TypeAct' + 'i');
                    var div = document.getElementById('button' + 'i');
                    div.onclick = function(e) {
                        makeMod.contentEditable = true;
                        makeMod.focus();
                        makeMod.style.backgroundColor = '#E0E0E0';
                        makeMod.style.border = '1px dotted black';
                    }
                }
            }
</script>

I had tried using the script without the for loop with

<td><div id=<?php echo "button"; ?>><span id='edit'>EDIT</span></div></td>

and

var makeMod = document.getElementById('TypeAct')` and `var div = document.getElementById('button')

but in that case the function works only for one row.

Changing ‘i’ to i solved the problem with the ‘button’ but when i click the button in different rows only the activity_type in the last row becomes editable and not the one in the same row as the button; as if the function only acts on the last generated row in the while loop of the table. Can you guess why?