Calculation of dynamic tag values

Question

You guys talk nice to each other? I’m messing with my system (read lab).

I’ve basically created the whole Back-End, but at the front I’m getting beat up with some treatments.

I am creating a budget screen, where the User will open new lines dynamically for each product added.

My code is like this:

function id(valor_campo) {
  return document.getElementById(valor_campo);
}

function getValor(valor_campo) {
  var valor = document.getElementById(valor_campo).value.replace(',', '.');
  return parseFloat(valor);
}

function multiplica() {
  var total = getValor('qtd') * getValor('valoru');
  id('valort').value = total;
}

$(document).ready(function() {
  var max_fields = 100;
  var x = 1;
  $('#add_field').click(function(e) {
    e.preventDefault(); //prevenir novos clicks
    if (x < max_fields) {
      $('#listas').append('\
                    <tbody>\
                        <tr class="remove' + x + '">\
                        <td><input type="text" name="qtd[]" id="qtd[]" placeholder="N°"></td>\
                        <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço"></td>\
                        <td><input type="text" name="valoru[]" onblur="multiplica()" id="valoru[]" placeholder="Valor"></td>\
                        <td><input type="text" name="valort[]" id="valort[]" maxlength="100" /></td>\
                        </td>\
                        <td><a href="#" class="remove_campo" id="remove' + x + '"><button type="button" class="btn-danger">Remover</button></a></td>\
                    </tbody>\
                ');
      x++;
    }
  });


  $('#listas').on("click", ".remove_campo", function(e) {
    e.preventDefault();
    var tr = $(this).attr('id');

    $('#listas tr.' + tr).remove();
    x--;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="listas" class="table table-hover">
  <thead>
    <tr>
      <th>Qtd</th>
      <th>Item</th>
      <th>Valor Unitário</th>
      <th>Valor Total</th>
      <th>Ação</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="qtd[]" id="qtd" placeholder="N°"></td>
      <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço" /></td>
      <td><input type="text" name="valoru[]" id="valoru" onblur="multiplica()" /></td>
      <td><input type="text" name="valort[]" id="valort" /></td>
      <td></td>
    </tr>
  </tbody>
</table>

I ended up assembling based on tips from other users here. However I want to calculate the input qtd multiplying the value of valoru showing total in valort

But when I add another line, my code just can’t do the calculation (I imagine because the ID repeats itself). What would be the best way around that?

Thank you all for helping me. A hug and a nice hot coffee in this cold =P

Answer 1

Yes the problem was the id, you already knew the solution, just do the same thing you did to remove the line, use the x to create unique id

I also arranged the insertion of new lines, which previously added a tbody on the table instead of a tr in the table body

Another detail, instead of decreasing the value of x when removing a line, I increased the value of max_fields, to avoid conflict when creating and deleting lines

function id(valor_campo) {
  return document.getElementById(valor_campo);
}

function getValor(valor_campo) {
  var valor = document.getElementById(valor_campo).value.replace(',', '.');
  return parseFloat(valor);
}

function multiplica(x) {
  var total = getValor('qtd'+x) * getValor('valoru'+x);
  id('valort'+x).value = total;
}

$(document).ready(function() {
  var max_fields = 100;
  var x = 1;
  $('#add_field').click(function(e) {
    e.preventDefault(); //prevenir novos clicks
    if (x < max_fields) {
      $('#listas').append('\
                        <tr class="remove' + x + '">\
                        <td><input type="text" name="qtd[]" id="qtd'+x+'" placeholder="N°"></td>\
                        <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço"></td>\
                        <td><input type="text" name="valoru[]" onblur="multiplica('+x+')" id="valoru'+x+'" placeholder="Valor"></td>\
                        <td><input type="text" name="valort[]" id="valort'+x+'" maxlength="100" /></td>\
                        </td>\
                        <td><a href="#" class="remove_campo" id="remove' + x + '"><button type="button" class="btn-danger">Remover</button></a></td>\
                ');
      x++;
    }
  });


  $('#listas').on("click", ".remove_campo", function(e) {
    e.preventDefault();
    var tr = $(this).attr('id');

    $('#listas tr.' + tr).remove();
    max_fields++;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='add_field'>ADD</button>

<table class="table table-hover">
  <thead>
    <tr>
      <th>Qtd</th>
      <th>Item</th>
      <th>Valor Unitário</th>
      <th>Valor Total</th>
      <th>Ação</th>
    </tr>
  </thead>
  <tbody id="listas">
    <tr>
      <td><input type="text" name="qtd[]" id="qtd0" placeholder="N°"></td>
      <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço" /></td>
      <td><input type="text" name="valoru[]" id="valoru0" onblur="multiplica('0')" /></td>
      <td><input type="text" name="valort0" id="valort0" /></td>
      <td></td>
    </tr>
  </tbody>
</table>