muro facebook con comentario jquery solamente

[daniel945]

Buenas noches, como verán, estoy empezando con jquery y estoy haciendo un muro parecido al de facebook, pero solo con jquery.

El problema que tengo es que realizo todo normalmente para la publicacion, el drama es que no puedo entender como hacer los comentarios a esa publicacion especifica.

aqui les paso el codigo:

Código Javascript:

$(document).ready(function() {
 
 
 
    $(".publicaciones").click(function(){
        
        $(this).css("height","60px");
        $(".downscroll").css("display","block");
        
        
        });
    
var i = 0;
    
$("#publicar").click(function(){
    var publicado = $(".publicaciones").val();
 
    
    $(".contenedorp").prepend('<div class="publishid' + i++ +'" >' + "<p>" + publicado + "</p>" + '</div>');
    
    var getid = $(".contenedorp").children().attr('class');
    
    $("." + getid).append('<div class="contentr">' + '<div class="'+getid+ "r" + '" >' + '<textarea class="comentario"></textarea></div>' + '<div class="buttonr">' + '<input type="button" id="responder" value="comentar"></div>' );
    
    $("#responder").click(function(){
        
    var comentario = $(".comentario").val();
    
    var getidr = $(".contentr").children().attr('class');
    
     $("." + getid).find(".buttonr").append(comentario);
    
    
    
    
    
    
    
    
    });
 
});
        
    
});
 

Código HTML:

<div id="wrapper">
    <div id="muro" class="left">
     <div class="wall">
        <div class="textbox">
            <textarea name="focuscomments" id="publicaciones" class="publicaciones" title="¿que estas pensando?" placeholder="¿Que estás Pensando?"></textarea>
     </div>
     <div class="downscroll">
        <div class="content-publicar">
        <input type="button" name="publicar" id="publicar" class="publicar" value="Publicar" /> 
         
        </div>
    
     </div>
     <div class="contenedorp">
     </div>
     
 
      
     </div>
 
    </div>
 
    <div id="datos" class="left">
    <p>Datos</p>
    
    </div>
    
</div>
 

Código CSS:

@charset "utf-8";
/* CSS Document */
 
body {
    margin:0;
    padding:0;
}
 
#wrapper {
    width:1024px;
    margin:0 auto;
    padding:0;
    position:relative;
}
 
.left {
    float:left;
}
 
#muro {
    display:block;
    width:512px;
    height:auto !important;
}
 
#datos {
    display:block;
    height:auto !important;
    width:512px;
}
#wall {
    border:  solid 1px #69F;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    margin-bottom:6px;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    margin-left:auto;
    margin-right:auto;
    margin-top:15px;
    text-align: left;
    width:500px;
}
 
.textbox {
    
    
}
 
.publicaciones {
    width:490px;
    border: none;
    overflow: hidden;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    height:20px;
    resize:none;
    
    
} 
.downscroll {
    background-color:#DFDFDF;
    height:30px;
    display:none;
    
    
}
.publicar {
    background-color: #5B74A8;
    border-color: #29447E #29447E #1A356E;
    border:1px solid #999;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    color: #FFFFFF;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    width: 60px;
    padding: 5px;
    border : 0px;
    float:right;
    margin-right:10px;
}
#sharebtn {
    padding:20px 5px;
}
.publications {
    border-top:solid 1px #CCCCCC;
    border-bottom:solid 1px #CCCCCC;
    
    }
.info {
    width:360px;
    height:100px;
    float:left;
    margin:15px
}
#prev {
    cursor:pointer;
}
#next {
    cursor:pointer;
}
#totalimg {
    font-size:9px;
    color:#000000;
    float:left;
    margin:5px;
}
label.title {
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
}
label.url {
    font-size: 11px;
    font-weight: normal;
    color: #666;
}
label.desc {
    font-size:11px;
    cursor:pointer;
}
.title:hover, .desc:hover {
    background-color:#FFFF99
}
.images {
    width:100px;
    height:100px;
    float:left;
    margin:15px 23px 15px 15px;
}
#loader {
    margin:16px 17px 7px 7px;
}
#fetched_data {
    height:125px;
    margin-bottom:10px;
}
#textareaWrap {
    text-align: center;
    background-color: #F2F2F2;
    height:135px;
    border:solid 1px #B4BBCD;
    border-width: 0 1px 1px;
}