onBlur (JavaScript) within a Loop For PHP

You have some semantic errors in your code. You are defining in each iteration of the loop in PHP a new set of elements with the same id of the previous one. When you run the javascript function, it will look for the element with the id, find the first in the DOM and return this, since the getElementByID returns only one element. A quick solution is to increment each id with the loop counter and put the counter as a parameter in Calc ():

<?
for ($i = 0; i < $tl_detalhe; $i++){
print "
          <tr>
            <td> <input class='input' id='qnt_saida_$i' name='qnt_saida_$i' type='text' value='".number_format($_SESSION['detalhe'][$i]->QUANTIDADE,5,",",".")."' onBlur='Calc($i)' /></td>
            <td> <input class='input' id='vl_unt_org_$i' name='vl_unt_org_$i' value='".number_format($_SESSION['detalhe'][$i]->VL_UNT_ORG,7,",",".")."' readonly /> </td>
            <td> <input class='input' id='vl_fob_$i' name='vl_fob_$i' readonly /> </td>
          </tr>
        ";
}
?>

The function Calc () would look like this:

<script type='text/javascript'>
    function Calc(indice){
        var qnt = document.getElementById('qnt_saida_'+indice).value;
        var vlr = document.getElementById('vl_unt_org'+indice).value;
        var tl = (qnt*1) * (vlr*1);
        document.getElementById('vl_fob_'+indice).value = tl;
    }
</script>

Not the most elegant solution, but will solve your problem with a minimum of changes. I recommend using jQuery for a cleaner solution.

Another thing, I'm assuming $ tl_details has the amount of records in $ SESSION ['details']. Anyway, I would save the session value to a local variable and would use this instead of accessing the session on each call.

I'd recommend learning how to use querySelector and querySelectorAll . In addition to being more flexible, they are compatible with all modern and pre-modern browsers.

Using these selectors, in many cases, you can even dismiss the use of id s, passing only this as a parameter in the function, saving HTML code and in some cases even JavaScript.

In the example below, I reproduce your code without using id :

function Calc(i){
   var linha = i.parentNode.parentNode; // seleciono a linha TR
   var qnt = i.value; // quantidade
   var vlr = linha.querySelector('[name="vl_unt_org"]').value; // valor
   var tl = qnt*vlr;
   linha.querySelector('[name="vl_fob"]').value = tl;
}

<table>
   <tr>
      <td> <input class='input' name='qnt_saida' type='text' value='2' onBlur='Calc(this)' /></td>
      <td> <input class='input' name='vl_unt_org' value='100.00' readonly /> </td>
      <td> <input class='input' name='vl_fob' readonly /> </td>
   </tr>
   <tr>
      <td> <input class='input' name='qnt_saida' type='text' value='3' onBlur='Calc(this)' /></td>
      <td> <input class='input' name='vl_unt_org' value='50.00' readonly /> </td>
      <td> <input class='input' name='vl_fob' readonly /> </td>
   </tr>
</table>

  

Note: I did not understand the use of this operation: (qnt*1) * (vlr*1) ! A number multiplied by 1 is equal to itself, so it does not make much sense to use it that way. In the example I left only qnt*vlr .