[PHP, JS]Porblem z przechwytywaniem danych z formularza

Hej,

Mam pewien problem z przechwytywaniem danych z formularza. Pobieram z bazy danych informacje i wyświetlam w polach. Każdy z formularzy (każdy obrót pętli) ma oddzielny button do edycji danych. Mój problem jest taki, że gdy wciskam któryś z buttonów, zawsze edytowany jest tylko ten pierwszy formularz. Kod JS zwraca za każdym razem id=1, bez względu na to jaki button nacisnę.
Niżej dorzucam kod. Jak sobie z tym poradzić? Z góry dzięki!

Kod:

<?php
    try {
      $stmt = $pdo->prepare("SELECT * FROM prace");
      $stmt->execute(array());
      $count = $stmt->rowCount();
      $i=0;
      while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $i++;
        $img = $row['img'];
        $tytul = $row['title'];
        $opi = $row['opis'];

      echo '<textarea class="form-control" name="id" rows="1" id="id" class="indeks">'.$i.'</textarea>
      <div class="form-group">
        <label for="img">Link do obrazka:</label>
        <textarea class="form-control" name="link" rows="1" id="link">'.$img.'</textarea>

      </div>
      <div class="form-group">
        <label for="title">Tytuł:</label>
        <textarea class="form-control" name="title" rows="1" id="title">'.$tytul.'</textarea>
      </div>
      <div class="form-group">
        <label for="opis">Opis:</label>
        <textarea class="form-control" name="opis" rows="1" id="opis">'.$opi.'</textarea>
      </div>
      <div class="form-group">
        <button type="submit" id="poprawa-'.$i.'" name="poprawa" class="btn btn-primary poprawa"> Popraw</button>
      </div>';

        }

      } catch (\Exception $e) {
          echo "Wystąpił nieoczekiwany błąd!";
      }
      ?>

$(".poprawa").click(function(){

    var link = $("#link").val().trim();
    var title = $("#title").val().trim();
    var opis = $("#opis").val().trim();
    var id = $("#id").val().trim();
    alert(id);
    $.ajax({
      url: 'update_prace.php',
      type: 'POST',
      data: {link:link, title:title, opis:opis, id:id},
      success: function(response){
        if(response == 0){
          alert("error");
        }
        else{
          alert("Poprawione!");
          location.reload();
        }
      }
    });
  });

W pętli robisz tak, że każdy Twój element ma taką samą wartość atrybutu name. Albo dawaj różne name np.

<textarea class="form-control" name="id_1"....>
<textarea class="form-control" name="id_2"....>

albo daj w nazwie atrybuty nawiasy, wtedy dostaniesz całą tablicę wartości -> name="id[]"

No tak, faktycznie to był błąd, ale nie rozwiązuje on problemu. Może widzisz coś jeszcze? Nie mogę sobię z tym poradzić. Nadałem inne zmienne atrybutom "id" i próbowałem przechwytywać w JS po nazwie klasy, ale wtedy w ogóle nie działa.

  echo '<textarea class="form-control indeks" name="id'.$i.'" rows="1" id="id-'.$i.'">'.$i.'</textarea> ...

  $(".poprawa").click(function(){
    var id = $(".indeks").val();
    var link = $(".link").val();
    var title = $(".title").val();
    var opis = $(".opis").val();
...