Edit list of textareras - php

Question

Im trying to develop a edit function, where you can edit different of notes by clicking on a simple link "Edit". When u click on this, the note beside the link should tranform from a div, to a editable textarea.
The code:
$(".edit").click( function(){
$('.edit_note').replaceWith(function() {
return $("<textarea>").text(this.innerHTML);
});
});
The problem is that when I click edit on a note, instead of just make that note editable, ALL the notes in the list are editable. How can I make sure of that only the note that I want to edit, is editable?
The notes are looped out from a table in MySQL.
foreach($byanat_notering as $key => $value){
echo "<tr><td width='160' valign='top'><font size='2'>";
echo substr($value["created"],0,16);
echo "<br />".$user[$value["users_id"]]["namn"];
echo "<br/><a href='#' class='edit'>Redigera</a>";
echo "</td><td width='550' valign='top'><font size='2'>";
echo "<div class='edit_note'>" . $value["text"] . "</div>";
echo "</td></tr>";
}

Answer 1

You need to separate it out using unique ids, I'm using a variable $i for it:
$i = 0;
foreach($byanat_notering as $key => $value){
echo "<tr><td width='160' valign='top'><font size='2'>";
echo substr($value["created"],0,16);
echo "<br />".$user[$value["users_id"]]["namn"];
echo "<br/><a href='#' class='edit' id='edit_". $i ."'>Redigera</a>";
echo "</td><td width='550' valign='top'><font size='2'>";
echo "<div class='edit_note' id='edit_note_". $i ."'>" . $value["text"] . "</div>";
echo "</td></tr>";
$i++;
}
$i = 0;
And in JavaScript refer by these unique ids only:
$(".edit").click( function(){
var id = parseInt($(this).attr('id').split('_')[1]); //returns the unique integer
//edit only the div with that integer assigned
$('#edit_note_'+id).replaceWith(function() {
return $("<textarea>").text(this.innerHTML);
});
});
I'm using the for loop's index ($i) to match a hrefs against the divs.

Answer 2

Try putting javascript inside for each loop
<?php
foreach($byanat_notering as $key => $value){
?>
<script type="text/javascript">
$(".edit-<?php echo $value["users_id"]; ?>").click( function(){
$('.edit_note-<?php echo $value["users_id"]; ?>').replaceWith(function() {
return $("<textarea>").text(this.innerHTML);
});
});
</script>
<?php
echo "<tr><td width='160' valign='top'><font size='2'>";
echo substr($value["created"],0,16);
echo "<br />".$user[$value["users_id"]]["namn"];
echo "<br/><a href='#' class='edit-".$value["users_id"]."'>Redigera</a>";
echo "</td><td width='550' valign='top'><font size='2'>";
echo "<div class='edit_note-".$value["users_id"]."'>" . $value["text"] . "</div>";
echo "</td></tr>";
}
?>