APEX

Hello. Using 24.1.4

I have a page with 2 IGs. If a user clicks several times in add row without saving changes before, the IGs get a huge mess. You change a column in one record and data is changed in the other record instead. No, I don´t have any strange javascript that does anything like that.

So I'm trying to disable add row when a user clicks it so it can be used only once. I've added this dynamic action in page load:

const boton_add = document.querySelector('button[data-action="selection-add-row"]');
/* const boton_guardar = document.querySelector('button[data-action="save"]'); */
const boton_guardar = jQuery("#btn_guardar");
const element_grid = document.querySelector('.t-ContentBlock');
let count_v = 0;
boton_add.addEventListener('click', function() 
{
  boton_add.style.display = 'none';
  count_v++;
  console.log(count_v);
  if (count_v > 1)
  {
     apex.message.showErrors([    
     {
       type:       "error",
       location:   "page",
       message:    "Sólo se puede insertar un registro a la vez",
       unsafe:     false
     }
     ]);
  }
});

/*  esto me da error 
boton_guardar.addEventListener('click', function() 
{
  boton_add.style.display = 'block';
  count_v =0;
  console.log(count_v);
});
*/

I've duplicated the code just changing the affected region so I can do the same in both grids, but it works only in the first one.

What am I missing?

Thanks.