Ciao a tutti, espongo velocemente il mio problema:

In una pagina io ho occorrenze multiple di:

codice:
	<div id="images">
		<div id="imagencap" style="float:left;">
			[img]nomedelFile.jpg[/img]
			<p id="id_descrizione">
			descrizione_Dell'Immagine
			</p>
		</div>
	</div>
Vorrei fare in modo, che quando si clicca su "descrizione_Dell'Immagine" il

venga sostituito con una textarea editabile, con all'interno il contenuto che apparteneva al

.

Di conseguenza, ho creato questo javascript:

codice:
	$("#images").find("#imagencap")
	.click(function(e){

		if($(this).children().is("textarea")){ return; }

		var myP = $(this).find("p");
		var myCaption = myP.text();
		var myId = myP.attr("id");

		var textarea = "<textarea id="+myId+">"+myCaption+"</textarea>";
		var buttons = "[SAVE] [CANCEL]";
		myP.hide();
		myP.before("
"+textarea+"
"+buttons);
	});
... che funziona. Mi crea la textarea e mi nasconde il

. MA, funziona solo con la prima occorrenza della pagina. Le altre vengono tralasciate!

Come posso fare?

Grazie mille!