Jquery, duplikowanie pól formularzy i przepisanie w nich wartości

Hej, mam taki problem z Jquery, wynikający chyba z mojego niewłaściwego rozumienia tego, jak JavaScript rozpoznaje model DOM.

Wygląda to tak: mam formularz, w którym mam taki div:

<div class="clone"> 
	   <input class="first_input" name="pole[]" type="text" value = "23">
	   <input class="second_input" id = "pole" name="wynik[]" type = "text" readonly>
   </div>
 

Mam funkcję, która pozwala duplikować ten div tworząc kolejne pola formularza. Chciałbym, żeby pole "second-input" wyświetlało zawsze zawartość odpowiedniego pola "first_input" pomnożone np przez 2. Mam coś takiego

$(".first_input").keyup(function(){
		$(".clone :nth-child(2)").val($(".clone :nth-child(1)").val() * 2);
	});
 

Problem polega na tym, że w tych kolejno dodanych polach wyświetla się pomnożona wartość z pierwszego pola, tzn zawsze jest brane pod uwagę to najwyższe pole, a nie to które zostało dodane.

JQuery prawie w ogóle nie używam, więc proszę o wyrozumiałość i z góry dzięki za pomoc :)

Pokaż jeszcze funkcję która duplikuje tego diva.

http://www.andresvidal.com/labs/relcopy.html

Domyślnie każdy kolejny div miał class = "clone copy 1,2,3... itd " jak zmieniłem ze klasa się nie zmienia i jest ciągle samo clone. Generalnie wygląda to tak jakby JQuery łapało tylko pierwsze występnie ".clone"

Ponieważ korzystasz z klas to selektor ".clone" bierze wszystkie zduplikowane divy. Przez to prawdopodobnie ostatecznie wynika branie wartości z pierwszego diva.
Zamiana

 $(".clone :nth-child(2)").val($(".clone :nth-child(1)").val() * 2);

Na

$(this).closest(".clone :nth-child(2)").val($(this).closest(".clone :nth-child(1)").val() * 2);

Powinna pomóc

Edit: Żeby doprecyzować. Funkcja closest() bierze najbliższy, względem wybranego elementu, obiekt spełniający warunek

mar-ek1 napisał(a):

Ponieważ korzystasz z klas to selektor ".clone" bierze wszystkie zduplikowane divy. Przez to prawdopodobnie ostatecznie wynika branie wartości z pierwszego diva.
Zamiana

Kopiuj

 $(".clone :nth-child(2)").val($(".clone :nth-child(1)").val() * 2);

Na

Kopiuj

$(this).closest(".clone :nth-child(2)").val($(this).closest(".clone :nth-child(1)").val() * 2);

Powinna pomóc

Edit: Żeby doprecyzować. Funkcja closest() bierze najbliższy, względem wybranego elementu, obiekt spełniający warunek

Hmm.. Nie działa.. inna sprawa, że nie bardzo rozumiem Twój tok rozumowania :) Głównie chodzi mi dwa pierwsze zdania.

Nie musisz cytować całego posta, który jest zaraz powyżej ;)

A co do mojego toku rozumowania to tak:
Jeśli dobrze zrozumiałem co chcesz zrobić to chcesz, żeby po wpisaniu czegoś w pole z klasą first_input wartość w polu second_input była wartością tego pierwszego x2. Jeśli to ma działać niezależnie dla każdej pary to w metodzie obsługującej zdarzenie wpisania czegoś trzeba jakoś wybrać ten konkretny input, po to ta zabawa z this i closest - żeby wybierało faktycznie najbliższy element, a nie wszystkie.

Inna sprawa, że w sumie to walnąłem drogę naokoło, bo skoro w divie są tylko 2 inputy to można tak:

 $(".first_input").keyup(function(){
        $(this).closest(".second_input").val($(this).val() * 2);
    });

Bo w funkcji jako this będzie ten pierwszy input ;)

A co do pierwszych zdań to chodziło mi o to, że skoro wybierasz w selektorze pierwsze dziecko elementu z klasą .clone, a klasę .clone ma każdy skopiowany div to bardzo prawdopodobne, że jquery bierze właśnie wartość tylko z pierwszego. Chociaż dokładnie to selektor ".clone :nth-child(2)" zwróci wszystkie drugie inputy we wszystkich divach

No tak. Niby wszystko się zgadza, tylko że przy użyciu Twojego kodu po dodaniu kolejnych kopii nie pobiera już nawet tej wartości z pierwszego :) Pole pozostaje puste + nie działa przepisywanie w pierwszym rzędzie:-)

Piszę z głowy, mogłem gdzieś literówkę walnąć ;) Konsola JS coś mówi?

Poza tym jak dodajesz element to jak dobrze pamiętam to trzeba zarejestrować dla niego zdarzenie na nowo czyli wywołać

 $(".first_input").keyup(function(){
...

na nowo, albo zamiast tego dać:

 $(document)on("keyup", ".first_input", function(){

Czyli zarejestrować zdarzenie keyup dla dokumentu, ale wywoływać je tylko dla elementów z klasą ".first_input"

Na razie poradziłem sobie inaczej. Pozmieniałem wszystko tak, że każdy kolejny rząd zawiera pola z id first+n i second+n. Dzięki temu odwołuje się w pętli do każdego z osobna i problem nie występuje.