JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>Valor Principal</tr>
  <tr> Percentual</tr>
  <tr> Valor Calculado</tr>
  <tbody>
    <tr>
        <td><input id="ValorPrincipal1"/></td>
        <td><input id="Percentual1"/></td>
        <td><input id="ValorCalculado1"/></td>
    </tr>
       <tr>
        <td><input id="ValorPrincipal2"/></td>
        <td><input id="Percentual2"/></td>
        <td><input id="ValorCalculado2"/></td>
    </tr>
       <tr>
        <td><input id="ValorPrincipal3"/></td>
        <td><input id="Percentual3"/></td>
        <td><input id="ValorCalculado3"/></td>
    </tr>
  </tbody>
</table>

JavaScript

$('input').blur(function(){

	var valorPrincipal = $(this).parent().parent().find('input[id*="ValorPrincipal"]').first().val();
	var percentual = $(this).parent().parent().find('input[id*="Percentual"]').first().val();
  var valorCalculado = valorPrincipal * percentual;
  
  if(valorCalculado != 0){
    $(this).parent().parent().find('input[id*="ValorCalculado"]').first().val(valorCalculado);
  }else{
  	$(this).parent().parent().find('input[id*="ValorCalculado"]').first().val('');
  }
});