Radio Buttons Using AJAX Always Giving The Same Value

I am using this code using AJAX. The probelm is no matter what choice is selected I always get the result grade=5.

<form>
<li><input type="radio" id="grade" name="grade" value="5" accesskey="5">Great</li>
<li><input type="radio" id="grade" name="grade" value="4" accesskey="4">Good</li>
<li><input type="radio" id="grade" name="grade" value="3" accesskey="3">OK</li>
<li><input type="radio" id="grade" name="grade" value="2" accesskey="2">Poor</li>
<li><input type="radio" id="grade" name="grade" value="1" accesskey="1">Oh, oh</li>
<li><input type="radio" id="grade" name="grade" value="0" accesskey="0">What is this?</li>
<li><input value="Study now"
type="button"
>
</li>
</form>

-------------------------------------

Now that a grade is entered it should be picked up by this text:

function createQueryString() {
var grade= document.getElementById("grade").value;
var queryString = "grade=" +grade;
return queryString;
}

-------------------------------------

function getNewTotals() {
var url = "getUpdatedSales.php";
url = url + "?dummy=" + new Date().getTime();
var queryString= createQueryString();
request.open("POST", url, true);
request.
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(queryString);
}

-------------------------------------

Why do I always get a result of grade=5?