This is probably a simple problem, but I'm not familiar with JS. I'm using Wordpress with a comment rating plugin to display 2 loops of comments - 1 sorted by "thumbs" rating, and second with standard order.

The problem:
When a thumb is clicked next to a comment in the standard section the vote is added to the comment in the rating section - since it's called first in code on the site. The standard section rating box is not being updated until page refresh.

What is expected:
When a vote is clicked, the rating for the same comment should be updated in both rating and standard loops sectons.

What was done:
GetElementByID was replaced by getElementsByClassName since ID should be unique across the page, the problem still exists as described above.

I have no idea how JS works, would greatly appreciate some help

The Code:
Code:
function ckratingcreateXMLHttpRequest(){
    var xmlhttp = null;
    try {
        // Moz supports XMLHttpRequest. IE uses ActiveX.
        // browser detction is bad. object detection works for any browser
        xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
        // browser doesn’t support ajax. handle however you want
        //document.getElementsByClassName("errormsg").innerHTML = "Your browser doesnt support XMLHttpRequest.";
        // This won't help ordinary users.  Turned off
        // alert("Your browser does not support the XMLHttpRequest Object!");
    }
    return xmlhttp;
}

var ckratingXhr = ckratingcreateXMLHttpRequest();

function ckratingKarma(class, action, path, imgIndex){
    ckratingXhr.open('get', 'http\://'+ path +'ck-processkarma.php?id='+ class +'&action='+ action +'&path='+ path +'&imgIndex='+imgIndex);
    ckratingXhr.onreadystatechange = ckratingHandleResponse;
    ckratingXhr.send(null);
}
function ckratingHandleResponse(){
    if(ckratingXhr.readyState == 4){
        var response = ckratingXhr.responseText.split('|');
        
        if(response[0] == 'done'){
            if(response[1]){
                //Changes the thumbs to dull gray and disable the action
                if (response[4] == 'down') {
                  if ( document.getElementsByClassName("down-"+response[1]) != null ) { 
                      document.getElementsByClassName("down-"+response[1]).src = "http://"+response[3]+'images/'+response[6]+'checkmark.png';
                  }
                }
                else {
                  if ( document.getElementsByClassName("down-"+response[1]) != null ) {
                      document.getElementsByClassName("down-"+response[1]).src = "http://"+response[3]+'images/'+response[6]+'gray_down.png';
                  }
                }
                if ( document.getElementsByClassName("down-"+response[1]) != null ) {
                   document.getElementsByClassName("down-"+response[1]).onclick    = '';
                }
                if (response[4] == 'up') {
                   if ( document.getElementsByClassName("up-"+response[1]) != null ) {
                      document.getElementsByClassName("up-"+response[1]).src   = "http://"+response[3]+'images/'+response[6]+'checkmark.png';
                   }
                }
                else {
                   if ( document.getElementsByClassName("up-"+response[1]) != null ) {
                      document.getElementsByClassName("up-"+response[1]).src   = "http://"+response[3]+'images/'+response[6]+'gray_up.png';
                   }
                }
                if ( document.getElementsByClassName("up-"+response[1]) != null ) {
                   document.getElementsByClassName("up-"+response[1]).onclick      = '';
                }
                //Update the karma number display
                if(!response[2]){
                	alert("Response has no value");
                }
                var karmanumber = response[2];
                //The below line is commented out because there is no karma number atm.
                if (document.getElementsByClassName("karma-"+response[1]+"-"+response[4]) != null) {
                   document.getElementsByClassName("karma-"+response[1]+"-"+response[4]).innerHTML = karmanumber;
                }
                // deal with the single value total
                /*if (document.getElementsByClassName("karma-"+response[1]+"-total") != null) {
                   document.getElementsByClassName("karma-"+response[1]+"-total").innerHTML = response[5];
                }*/
            } else {
                alert("WTF ?");
            }
            
        }
        else if(response[0] == 'error')
        {
            var error = 'Error: '+response[1];
            alert(error);
        } else {
           /*  This causes unnecessary error messages when the icon
            *  is double clicked.
        	   alert("Reponse: "+response[0]);
            alert("Karma not changed, please try again later.");
            */
        }
    }
}
var crToggleComment = 0;

function crSwitchDisplay(class) {
   if (crToggleComment % 2 == 0) { crShowdiv(class); }
   else { crHidediv(class); }
   crToggleComment++;
}

// hide <div id='a2' style="display:none;"> tagged div ID blocks
function crHidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

// show <div id='a2' style="display:none;"> tagged div ID blocks
// <a href="javascript:crShowdiv('a2');">show a2</a>

function crShowdiv(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}