I  have a vf page that displays the list of products, When the user enters the discount in the input text the salesprice should be calculated and auto populated in the next column of the same row. I am calling a javascript function upon the event of onchange on discount field  to calculate salesprice but I am  not sure how to update the salesprice column on the  pageblock table.

Also I am not able to read the values of the discount entered : alert(document.getElementById(discPcrnt).value);  --->also does not give the value of the discount entered it says unavailable.
       

Below is the js:

function CalculateSP(discount,stdPrice,prodSalesPrice){
         alert("In Calculate Sp");
      
       var standardPrice= document.getElementById('stdPrice').value;
         alert("IN TEST");
        alert(document.getElementById(stdPrice).value);
       
       var  discount=document.getElementById(discPcrnt).value;
        var discPrice = stdPrice*discount/100 ;
       
        document.getElementById(prodSalesPrice).value=stdPrice - discPrice ;
       
              }

My VF Page partly:

<apex:column headervalue="Standard Price" id="stdPrice">
                <apex:outputtext value="{!products1.stdPrice}"/>
            </apex:column>  
           
         
                  <apex:column headervalue="quantity"  id="prodQuantity">
               <apex:inputtext value="{!products1.quantity}"/>
            </apex:column>
               
                 <apex:column headervalue="Discount %"  id="discPcrnt">
               <apex:inputtext value="{!products1.discount}" onchange="CalculateSP('{!$Component.discPcrnt}','{!$Component.stdPrice}'),'{!$Component.prodSalesPrice}';" />
            </apex:column>
           
            <apex:column headervalue="Sales Price" id="prodSalesPrice">
            <apex:outputtext value=??????>
            </apex:column>
           

Any help is greatly appreciated.

Thanks