Pobieranie zmiennej byName

Cześć,
Mam taki skrypt.
Pętla generująca 10 przycisków a do każdego z nich przypisana jest wartość od 1 do 10.
Bez względu na to, który przycisk przycisnę to wyświetli mi 1.
Logiczne bo zmienną pobieram document.getElementsByName("numer")[0].value;
Szukam sposobu jak to [0] zamienić by wyświetlało mi tą zmienną, przy której nacisnąłem przycisk.
Jakaś podpowiedź

<?php 
for ($i=1; $i<10; $i++){
echo "<input type='text'  name='numer' value =".$i.">";
echo "<button class='button' onclick='edytuj()'>Edytuj</button>";
echo "</br>";
 
}
 ?>
<script>
function edytuj(){
    var numer1 = document.getElementsByName("numer")[0].value;
    alert("Wartość id: "+numer1);
}
</script>

Coś takiego:

for ($i=1; $i<10; $i++){
   echo "<input type='text' id='btn-$i' name='numer' value=$i>"; 
   echo "<button class='button' onclick='edytuj($i)'>Edytuj</button>";  
   echo "</br>";
}

function edytuj(id){
    var numer1 = document.getElementById("btn-"+ id).value;
    alert("Wartość id: "+numer1);
}

Rozwiązanie @serek jest poprawne, ale generalnie zamiast dodawać obsługę zdarzenia do każdego przycisku i pakować logikę do htmla, lepiej zrobić coś takiego:

echo "<form id='my-form'>";
for ($i=1; $i<10; $i++){
   echo "<input type='text' id='btn-$i' name='numer' value=$i>";
   echo "<button class='button' data-id='$i'>Edytuj</button>";
}
echo "</form>";

document
  .getElementById('my-form')
  .addEventListener('click', (event) => {
    event.preventDefault()
    if (event.target.tagName === 'BUTTON') {
      console.log('Button id:', event.target.dataset.id)
    }
  })