So I've got a VF page that uses a pageBlockTable to display Standard Rate, Discount %, and Discounted Rate for a series of items.  Both the Discount % and the Discounted Rate are editable.  I'd like to be able to let the user change one and have the other calculated for them (using the Standard Rate for the calculation).  I'd also like to do this on the page rather than in the database using triggers or other such methods, so the user has the option of canceling and abandoning any changes.

I've got a couple of JavaScript functions that look like they should do the trick, but they're not.  I'm pretty sure it's because they aren't properly referencing the row in the pageBlockTable, but I'm not certain.  Can anyone tell me how to fix this page so I can get what I'm after?

<apex:page controller="DiscountRateController" action="{!displayRecords}"> 
<script type="text/javascript">
  function updateRate(){
    rate=document.getElementByID("rate").value;
    discPct = document.getElementByID("discPcrnt").value;
    document.getElementByID("discRate").value = rate - (rate * (discPct/100)));
  }
  function updatePcrnt(){
    rate=document.getElementByID("rate").value;
    discRate = document.getElementByID("discRate").value;
    document.getElementByID("discPcrnt").value = (((rate - discRate)/rate) * 100);
  }
</script>
  <apex:form id="discountRates">
    <apex:pageBlock id="discountRatespb">
      <apex:pageBlockButtons >
        <apex:commandButton action="{!edit}" value="Edit" 
            rendered="{!NOT isEditable}" />
        <apex:commandButton action="{!save}" value="Save" 
            rendered="{!isEditable}" />
        <apex:commandButton action="{!cancel}" value="Cancel" 
            rendered="{!isEditable}" />
      </apex:pageBlockButtons>
      <apex:pageBlockTable value="{!selectedRates}" var="sR">
        <apex:column value="{!sR.Item__c}" />
        <apex:column id="rate" value="{!sR.Rate__c}" />
        <apex:column headerValue="Discount %">
          <apex:outputField value="{!sR.Discount__c}" rendered="{!NOT isEditable}" />
          <apex:inputField id="discPcrnt" value="{!sR.Discount__c}" 
            rendered="{!isEditable}" onchange="updateRate();"/>
        </apex:column>
        <apex:column headerValue="Discounted Rate">
          <apex:outputField value="{!sR.Discounted_Rate__c}" 
            rendered="{!NOT isEditable}" />
          <apex:inputField id="discRate" value="{!sR.Discounted_Rate__c}" 
            rendered="{!isEditable}" onchange="updatePcrnt();"/>
        </apex:column>
      </apex:pageBlockTable> 
    </apex:pageBlock>   
  </apex:form>
</apex:page>

Any hints would be appreciated.

Thanks,

Jonathan