Just starting out with jQuery and JS. Want to create a simplified version of Twitter with individual comment boxes for each tweet. Here's my JSFiddle: Currently, the comment box is appearing at the end of the last tweet instead of under each tweet. How can I achieve this?
Javascript:
$(document).ready(function () {
$("#btn1").click(function () {
$("p").append(" <b>Appended text</b>");
});
$(".commentbutton").click(function v() {
var text = $("#txt1").val();
$("body").append('<br><div class="x"><label class="gp">' + text + '</label><button id="b1"</button>Comment</div>');
$("body").find(".x:last").hide().slideDown("slow");
});
$(document).on('click', '.x>button', function () {
$('body').find('.x:last').append('<input id="txt1" type="text">');
});
});
HTML:
<div style="position:absolute;left:230px;top:30px;border:solid;display:inline-block">
<p>Type a tweet</p>
<input id="txt1" type="text">
<br>
<button id="btn2" class="commentbutton">Tweet</button>
</div>
CSS:
.gp {
border-style: solid;
max-width: 30%;
padding: 2px;
display: block;
}
.x {
width: 200px;
background-color: #93bbd4;
border-style: solid;
}
#txt1 {
width: 200px;
height: 28px;
}