JSFiddle - React, Tailwind, and code Playground

by paulosix12

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <table class="table m-0" classe="order-list" id="products-table">
    <thead>
      <tr>
      <th>Produto/Serviço</th>
      <th>Quantidade</th>
      <th>Valor Unitário</th>
      <th>Valor Total</th>
      </tr>
    </thead>
    
    <tbody class="row">

    </tbody>
    
    <tfoot>
    <tr>
      <td colspan="4" style="text-align: left;">
        <button class="btn btn-info waves-effect w-md waves-light m-b-5"  id="addLinha" type="button">Adicionar Produto</button>
      </td>
    </tr>
  </tfoot>    
</table>

JavaScript

$(document).ready(function () {
    var contador = 1;
    //adiciona nova linha
    $("#addLinha").on("click", function () {
        contador++;
        
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input type="text" name="produto' + contador + '"/></td>';
        cols += '<td><input type="text" name="preco' + contador + '"/></td>';
        cols += '<td><input type="text" name="quant' + contador + '"/></td>';
        cols += '<td class="col-md-2 total">R$ 100,00</td>';
        cols += '<td><a class="deleteLinha"> Excluir </a></td>';
        newRow.append(cols);
        
        $("#products-table").append(newRow);
    });
    
    //chamada da função para calcular o total de cada linha
    $("#products-table").on("blur keyup", 'input[name^="preco"], input[name^="quant"]', function (event) {
        calculateRow($(this).closest("tr"));
    });
    
    //remove linha
    $("#products-table").on("click", "a.deleteLinha", function (event) {
        $(this).closest("tr").remove();
    });
});
 
//função para calcular o total de cada linha   
function calculateRow(row) {
    var preco = +row.find('input[name^="preco"]').val();
    var quant = +row.find('input[name^="quant"]').val();
    //2 casas decimais
    var tot = (preco * quant).toFixed(2);
    //substitui ponto por virgula
    tot=tot.replace(".", ",");
    //a regex abaixo coloca um ponto a esquerda de cada grupo de 3 digitos desde que não seja no inicio do numero
    row.find('.total').html("R$ " + (tot).replace(/\B(?=(\d{3})+(?!\d))/g, "."));     
}