JSFiddle - React, Tailwind, and code Playground

by hugo borges

HTML

<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>


Custo: <input type='text' id='custo' class='custo' name='custo'>
<br><br>
Valor: <input type='text' id='valor1' class='valor' name='valor1' margem='margem1'>
Margem: <input type='text' id='margem1' class='margem' name='margem1' valor="valor1">

<br>
Valor: <input type='text' id='valor2' class='valor' name='valor2' margem='margem2' >
Margem: <input type='text' id='margem2' class='margem' name='margem2' valor="valor2">

JavaScript

// Faz o calculo da margem com base no valor
    $(document).ready(function () {
        $(".valor").on("input", function () {
            // Margem
            var valor = parseFloat($(this).val().replace(",", ".")) || 0.0;
            
            // Custo  
            var valorCusto = parseFloat($('#custo').val().replace(",", ".")) || 0.0; 
            var calculo = (parseFloat(valor) - parseFloat(valorCusto)) / parseFloat(valorCusto) * 100;
            var inputMargem = $(this).attr("margem");
            $("#" + inputMargem).val(calculo.toFixed(2)).trigger('blur');
        });
        // Faz o calculo do valor com base na margem
        $(".margem").on("input", function () {
            // Margem
            var valorMargem = parseFloat($(this).val().replace(",", ".")) || 0.0; 
            // Custo
            var valorCusto = parseFloat($('#custo').val().replace(",", ".")) || 0.0;  
            var calculo = (parseFloat(valorCusto) * parseFloat(valorMargem) / 100) + parseFloat(valorCusto);
            var inputValor = $(this).attr("valor");
            
            var resultadoMonetario = calculo.toFixed(2).replace(".", ",");
            $("#" + inputValor).val(resultadoMonetario).trigger('blur');
        });
    });

$('input').mask('00.000.000,00', {
        reverse: true
    });