Javascript для нескольких элементов в цикле PHP

window.onload = function() {
  let maximum = 3;//sample value, leave this line like in your original code
  let makeMod;
  for (let i = 1; i <= maximum; i++) {
    document.getElementById('button-' + i).addEventListener("click", function(e) {
      makeMod = document.getElementById('TypeAct-' + i);
      makeMod.contentEditable = true;
      makeMod.focus();
      makeMod.style.backgroundColor = '#E0E0E0';
      makeMod.style.border = '1px dotted black';
    });
  }
}

<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>
      <tr>
        <td>some data</td>
        <td>some data</td>
        <td>some data</td>
        <td>
          <div id = "TypeAct-1">act 1</div>
        </td>
        <td>
          <div id = "button-1"><span id='edit-1'>EDIT</span></div>
        </td>
      </tr>
      <tr>
        <td>some data</td>
        <td>some data</td>
        <td>some data</td>
        <td>
          <div id = "TypeAct-2">act 2</div>
        </td>
        <td>
          <div id = "button-2"><span id='edit-2'>EDIT</span></div>
        </td>
      </tr>
      <tr>
        <td>some data</td>
        <td>some data</td>
        <td>some data</td>
        <td>
          <div id = "TypeAct-3">act 3</div>
        </td>
        <td>
          <div id = "button-3"><span id='edit-3'>EDIT</span></div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

const d=document;
const CN='editable';

d.querySelector('.container table').addEventListener('click', e=>{
  if ( e.target instanceof HTMLSpanElement && e.target.dataset.type == 'edit' ) {
    let id=e.target.parentNode.dataset.id;
    let content = e.target.parentNode.closest('tr').querySelector('div[data-type = "content"]');
        content.contentEditable=true;
        content.focus();
        content.classList.add( CN );
        
    console.info( ' -> Id=%s',id )
  }
});

d.querySelectorAll('[data-type = "content"]').forEach(n=>n.addEventListener('blur',e=>{
  if ( e.target.classList.contains( CN ) ){
    e.target.classList.remove( CN );
    e.target.contentEditable=false;
    
    // update using ajax?
    console.info(e.target.dataset.id,e.target.textContent);
  }
}));

.editable{
  background:#E0E0E0;
  border:1px dotted black
}

<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>
      <!-- emulated content -->
      <!--
        The `IDActivity` value is what would be assigned
        to the `data-id` attribute below. That `data-id`
        is easily accessible in Javascript and can be used
        for whatever EDIT operation you wish.
        
        ie: 
        <td>
          <div data-id = "<?=$selRow['IDActivity'];?>">
            <?=$selRow['Activity_type'];?>
          </div>
        </td>
      -->
      <tr>
        <td>1</td>
        <td>2023/04/15</td>
        <td>Midfield</td>
        <td><div data-id=1 data-type='content'>Banana Bouncing</div></td>
        <td><div data-id=1><span data-type='edit'>EDIT</span></div></td>
      </tr>
      <tr>
        <td>2</td>
        <td>2023/04/17</td>
        <td>Ground-Level</td>
        <td><div data-id=2 data-type='content'>Hedgehog Juggling</div></td>
        <td><div data-id=2><span data-type='edit'>EDIT</span></div></td>
      </tr>
      <tr>
        <td>3</td>
        <td>2023/04/18</td>
        <td>Upstairs</td>
        <td><div data-id=3 data-type='content'>Dwarf Tossing</div></td>
        <td><div data-id=3><span data-type='edit'>EDIT</span></div></td>
      </tr>
      <!-- end emulated content -->
    </tbody>
  </table>
</div>