Ok, here’s my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<style type="text/css">
.invirep{
display:none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var replylinkcode = $('<a href="#" id="reply"> [Reply]</a>');
$('#comments ul li').append(replylinkcode);
$('#reply').click(function(){
var textareacode = $("<br/><textarea cols='10' rows='2' id='replybox'></textarea>");
$(this).parent().append(textareacode);
});
});
</script>
</head>
<body>
<div id="comments">
<ul>
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
<li>Comment 4</li>
</ul>
</div>
</body>
</html>
My problem is: why is it that it’s only when I click the first item’s reply link that the textbox appears and not for the other items (second, third and fourth items)?
Because you are using ID instead of class.
http://jsfiddle.net/a55Tb/