How to get dynamically generated text field value in javascript

Question

Hi friends. Actually, I have 2 questions .. I am creating a social website, for example facebook ... On this website I have several messages that come from the database If someone wants to comment on this post, then only the first post works. But the comment of the first post goes to the last post ..

<%String sql="select * from post ORDER BY id DESC";
        st = con.createStatement();
        rs=st.executeQuery(sql);%>
<input type="text" id="postboxwritereview" name="postboxwritereview" placeholder="write a review" onkeypress="loadXMLDoc2()"/>

<script type="text/javascript">
document.getElementById("postboxwritereview").onkeypress = function(event){
            if (event.keyCode == 13 || event.which == 13){
               var xmlhttp;
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("postbox_bottom_my_review").innerHTML=xmlhttp.responseText;
}
}
var x = document.getElementById("postboxwritereview").value;
xmlhttp.open("GET", 'insertReview.jsp?user='+x+'&p_id=<%=post_id%>&p_uid=<%=post_uid%>&author_uid=<%=u_id%>', true);
xmlhttp.send();
document.getElementById("postboxwritereview").value="";
}
};
</script>

And the second problem is that .. I get an ajax response from the servlet and showing that resppnse is in the div But there are many divs created dynamically with the same id..so ajax the response from the first message goes to the last message .. Plz help me Here is the code .. AJAX CODE

<script type="text/javascript">
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("showRating").innerHTML=xmlhttp.responseText;
}
}
var username=$('input:radio[name=rating_blog]:checked').val();
xmlhttp.open("GET", 'InsertRating?user='+username+'&p_id=<%=post_id%>&p_uid=<%=post_uid%>', true);
xmlhttp.send();
}
</script>

HTML CODE

<div id="submit" onclick="loadXMLDoc()">
<div>
<input id="rating1" type="radio" name="rating_blog" value="1" onclick="this.form.submit()">
<input id="rating2" type="radio" name="rating_blog" value="2" onclick="this.form.submit()">
<input id="rating3" type="radio" name="rating_blog" value="3" onclick="this.form.submit()">
</div>

Answer 1

!

jQuery, '$.ajax()'?

:

function loadXMLDoc(event){
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            $(event.target).find("#showRating").text = xmlhttp.responseText
        }
    }
    var username=$('input:radio[name=rating_blog]:checked').val();
    xmlhttp.open("GET", 'InsertRating?user='+username+'&p_id=<%=post_id%>&p_uid=<%=post_uid%>', true);
    xmlhttp.send();
}