Edycja rekordu w tabeli w jQuery

Dobra edycja już prawie działa tylko mam problem ponieważ wymyśliłem to sobie tak że po kliknięciu w pole edycji pod spodem wyświetla mi się nowy wiersz taki pomocniczy w którym wprowadzam sobie dane do zmiany np.

ale jak utworze 2 wiersz i kliknę edycje to wyświetla mi się to tak

zamieszczam kod w jQery

 var i = 1;
var imie;
  $(document).ready(function()
  {
 
 
    $("#dodaj").click(function()
    {
      imie = $("#imie").val();
      var wiersz = ("<tr class='wiersz'><td class='first'></td><td class='wImie'>" + imie + "</td><td><button class='usun'>Usuń</button></td><td><button class='edytuj'>Edycja</button></td></tr>");
 
      $("#tB").append(wiersz);
 
      $(".first").each(function(i)
      {
        $(this).text(i+1);
      });
 
      $("#tB").on("click",".usun",function()
      {
        $(this).parent().parent().remove();
 
        $(".first").each(function(i)
        {
          $(this).text(i+1);
        });
 
      });
 
      $("#tB").on("click",".edytuj",function()
      {
 
        var wiersz = $("<tr><td></td><td><input type='text' placeholder='Podaj imię' id='wImie'/></td><td><button class='zapis'>Zapisz </button></td><td><button class='anuluj'>Anuluj</button></td></tr>");
        $(this).closest('tr').after(wiersz);
 
      });
 
    $("#tB").on("click",".anuluj",function(){
      $(this).parent().parent().remove();
    });
 
    $("#tB").on("click",".zapis",function(){
 
 
      var noweImie = $("#wImie").val();
      var nowe = imie.replace(imie,noweImie);
      $(".wImie").text(nowe);
      $(this).parent().parent().remove();
 
 
 
    });
 
    });
 
 
 
  });  

Zamieszczam też link na jsbin.com

https://jsbin.com/seleqineri/1/edit?html,css,js,output

Twoje przypięcie zdarzenia:

$("#tB").on("click",".edytuj",function()

znajduje się WEWNĄTRZ obsługi zdarzenia:

$("#dodaj").click(function()

Oznacza to, że z każdym kliknięciem dodaj powodujesz przypięcie identycznej obsługi zdarzenia klikania na edycję. Kod wykonuje się więc kilka razy.

Dobra już rozumiem przenieść poza dodaj :)
Ale teram mam problem z edycją mianowicie jak edytować jedno wybrane imię ? Bo jak edytuje dowolne imię to zmieniają mi się wszystkie ?
Może wytłumaczę na przykładzie.

po edycji dowolnego np o nr "2" zmieniają mi się wszystkie a nie jedno wybrane

Wrzuć aktualny kod na jsbin

Proszę kolego

https://jsbin.com/telohiqeje/1/edit?html,css,js,output

No więc przeanalizujmy kod:

var noweImie = $("#wImie").val(); // pobierasz nowe imię z inputa na dole
var nowe = imie.replace(imie,noweImie); // do zmiennej NOWE przypisujesz wcześniej zapisaną informację o DODANYM imieniu, zastępując ją całą nowo pobranym imieniem [?] - istnienia tej linii nie rozumiem
$(".wImie").text(nowe); // do WSZYSTKICH pól z klasą `.wImie` wpisujesz nowe imię (bez linijki wyżej wystarczyłoby `.text(noweImie)`)
$(this).parent().parent().remove(); // kasujesz wiersz, spoko

Teraz z pomocą przychodzą Ci dwie rzeczy: karta i długopis. Rozrysuj sobie na nim algorytm działania programu (strony). Podążaj krok za krokiem, głośno mów jakie dane masz na wejściu danego kroku i co z nimi się dzieje po wyjściu z tego kroku. Nazywa się to https://pl.wikipedia.org/wiki/Metoda_gumowej_kaczuszki

Twoim problemem jest to, że nie zapisujesz z którego wiersza pochodzi "prośba" o edycję. Chcesz zapisać i nie wiesz gdzie, więc zapisujesz wszędzie. Zamiast tworzyć niepotrzebnie zmienną globalną imie, stwórz sobie taką zmienną oznaczającą ostatnio kliknięty przycisk edycji (a lepiej - numer/id wiersza (zapisywanie w zmiennej globalnej elementów DOM może prowadzić do wycieku pamięci)).

W momencie jak zakończysz prace nad tym projektem to pokażę Ci jak to powinno wyglądać od A-Z :)

Pomoże ktoś ? bo już brakuje mi pomysłu jak pokazać po kliknięciu w przycisk edytuj numer wiersza ?

Zakładam, że zlałeś moje rady odnośnie kartki i długopisu?

Przy dodawaniu wiersza nadaj mu atrybut id (np. "wiersz" + i --- zmienną i już przecież masz) - nie dodawaj ID, które zaczynają się od cyfry, bo to niedozwolone i możesz trafiać na bugi potem przez to.

Skoro opanowałeś już parent itd, to bez problemu dostaniesz się do <tr> z numerem id, odczytasz to przez jQuerowe attr.

To coś zapiszesz sobie do wiersza z inputem na dole (np. wstaw to do drugiego inputa - na początek zwykłego, widocznego).

Potem przy zapisie odczytujesz inputa z id, szukasz wiersza po ID, podmieniasz zawartość.

Dobra kolego zrobiłem a tu masz kod zrobiony zgodnie z dom

https://jsbin.com/fobahabuha/edit?html,css,js,output