Append/Add Child Div (jQuery) for Messaging System
- by Lord Varlin
So, I'm having difficulty trying to append/add a child div to the parent div, and thought someone out here may know the best way for me to go about this. I have attached my code (without PHP right now, just hard coding text and stuff). But here is what I am trying to do:
When a message is posted, you hit the "Reply Button" and a new div will appear underneath containing the reply form.
Right now, here are the issues I know about and can't get around:
The DIV is a class, so when I use jQuery to try to target the DIV it targets everything since it's no unique.
The Reply Button is also a class, so it's not unique.
Here is a video of it in action: http://tinypic.com/r/2luxwnr/7
HTML
<body>
<div id="content-container">
<div id="message-viewer">
<div class="roar">
<div class="roaractionpanel">
<div id="msg-business2"></div>
<div class="roartime"><p class="roartime-text">3:26PM</p></div>
</div>
<div class="roarcontent">
<button type="submit" class="btn-reply"></button>
<h5>Test Post</h5><br>
<h6>Lord Varlin</h6><br>
<h2>Test post... let's see.</h2>
</div>
</div>
<div class="newreply">
<div class="newreplycontent">
<h1>This is where the fields for a new reply will go.</h1>
</div>
</div>
<div class="roar">
<div class="roaractionpanel">
<div id="msg-business2"></div>
<div class="roartime"><p class="roartime-text">3:26PM</p></div>
</div>
<div class="roarcontent">
<button type="submit" class="btn-reply"></button>
<h5>Testing another</h5><br>
<h6>Lord Varlin</h6><br>
<h2>Hmm dee dumm...</h2>
</div>
</div>
<div class="roarreply">
<div class="roarreply-marker">
<p class="roarreplytime-text">June 26th @ 4:42AM</p>
</div>
<div class="roarreplycontent">
<h9>Testing a reply. Hmmmm.</h9><br>
<h8>Lord Varlin</h8>
</div>
</div>
<div class="newreply">
<div class="newreplycontent">
<h1>This is where the fields for a new reply will go.</h1>
</div>
</div>
<div class="roar">
<div class="roaractionpanel">
<div id="msg-business2"></div>
<div class="roartime"><p class="roartime- text">3:26PM</p></div>
</div>
<div class="roarcontent">
<button type="submit" class="btn-reply"></button>
<h5>Testing another</h5><br>
<h6>Lord Varlin</h6><br>
<h2>jQuery, work with me please.</h2>
</div>
</div>
<div class="roarreply">
<div class="roarreply-marker">
<p class="roarreplytime-text">June 26th @ 4:42AM</p>
</div>
<div class="roarreplycontent">
<h9>Testing a reply. Hmmmm.</h9><br>
<h8>Lord Varlin</h8>
</div>
</div>
<div class="roarreply">
<div class="roarreply-marker">
<p class="roarreplytime-text">June 26th @ 4:42AM</p>
</div>
<div class="roarreplycontent">
<h9>Testing a reply. Hmmmm.</h9><br>
<h8>Lord Varlin</h8>
</div>
</div>
<div class="newreply">
<div class="newreplycontent">
<h1>This is where the fields for a new reply will go.</h1>
</div>
</div>
</div>
</div>
</body>
JQUERY
$(".btn-reply").click(function() {
$(".newreply").toggleClass("show");
return false;
});
So, I see the flaws, but I just can't wrap my head around how to pull this off! Any guidance would be awesome! :)
