Error while performing Javascript summation

Question

I have a calculus script I adapted from another page. There, all right, but this, even checking the same ids and the like, does not work. I took the essentials from the screen, to demonstrate what I’ve done so far.

$(".real").maskMoney({
  prefix: 'R$ ',
  thousands: '.',
  decimal: ',',
  affixesStay: true
});

function rePlace(i) {
  return parseFloat(i.replace(/[^\d.,]/g, "").replace('.', '').replace(',', '.'));
}

Number.prototype.formataReal = function(c, d, t) {
  var n = this,
    c = isNaN(c = Math.abs(c)) ? 2 : c,
    d = d == undefined ? "," : d,
    t = t == undefined ? "." : t,
    s = n < 0 ? "-" : "",
    i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
    j = (j = i.length) > 3 ? j % 3 : 0;
  return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

//any time the amount changes
$(document).ready(function() {
  $('.qtde_orc, .valor_orc').change(function(e) {
    var valor_total_orc = 0;
    var $row = $(this).parent();
    var valor_orc = rePlace($row.find('.valor_orc').val());
    var qtde_orc = $row.find('.qtde_orc').val();
    valor_total_orc = parseFloat(valor_orc * qtde_orc);
    //update the row total
    $row.find('.valor_total_orc').val('R$ ' + (valor_total_orc).formataReal(2, ',', '.'));

    var total_geral = 0;
    $('.valor_total_orc').each(function() {
      //Get the value
      var tg = rePlace($(this).val());
      //if it's a number add it to the total
      if (IsNumeric(tg)) {
        total_geral += parseFloat(tg);
      }
    });
    $('.total_geral').val('R$ ' + (total_geral).formataReal(2, ',', '.'));
  });
});

function IsNumeric(input) {
  return !isNaN(parseFloat(input)) && isFinite(input);
}

.pedido_desktop,
.nome_desktop {
  display: block;
}

.pedido_smartphone,
.nome_smartphone {
  display: none;
}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 769px) and (max-width: 991px) {}

@media (min-width: 481px) and (max-width: 768px) {
  .pedido_desktop,
  .nome_desktop {
    display: none;
  }
  .pedido_smartphone,
  .nome_smartphone {
    display: block;
  }
}

@media only screen and (max-width: 480px) {
  .pedido_desktop,
  .nome_desktop {
    display: none;
  }
  .pedido_smartphone,
  .nome_smartphone {
    display: block;
  }
}

<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://plentz.github.io/jquery-maskmoney/javascripts/jquery.maskMoney.min.js"></script>

<div class="linha_orc">
  <div class="row">


    <div class="">
      <div style="visibility: hidden; height: 1px;">
        <input name="id_item_up[7]" id="id_item_up[7]" class="checkbox-custom" type="checkbox" value="7" style="width:50%;" tabindex="18" checked>
      </div>
      <div class="col-md-2">
        <img src="/images/especies/orc/23996772607f968bd784686d66c1348a.jpg" style="margin-top: 15%;">
      </div>
      <div class="col-md-2 no_padding">
        <div class="nome_smartphone">
          <div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Black Bass</div>
        </div>
        <div class="nome_desktop">
          <p class="nome_esp input_esp">Black Bass</p>
        </div>
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="quantidade[7]" id="quantidade[7]" class="form-control input_qtde qtde_orc" placeholder="Quant." />
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <div class="form_select_config fs_pedido">
          <select name="tamanho[7]" id="tamanho[7]" class="s_pedido">
														<option value="" selected="selected" disabled="disabled">Tamanho</option>
														<option value="Alevino">Alevino</option>
														<option value="Juvenil">Juvenil</option>
														<option value="Adulto">Adulto</option>
													</select>
        </div>
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="preco[7]" id="preco[7]" class="form-control input_qtde real valor_orc" placeholder="Preço" />
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="total[7]" id="total[7]" class="form-control input_qtde  valor_total_orc" placeholder="Total" />
      </div>
    </div>




    <div class="">
      <div style="visibility: hidden; height: 1px;">
        <input name="id_item_up[8]" id="id_item_up[8]" class="checkbox-custom" type="checkbox" value="8" style="width:50%;" tabindex="18" checked>
      </div>
      <div class="col-md-2">
        <img src="/images/especies/orc/d7aff9de2ff60eade6cb39a35b1dec75.jpg" style="margin-top: 15%;">
      </div>
      <div class="col-md-2 no_padding">
        <div class="nome_smartphone">
          <div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Cachara</div>
        </div>
        <div class="nome_desktop">
          <p class="nome_esp input_esp">Cachara</p>
        </div>
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="quantidade[8]" id="quantidade[8]" class="form-control input_qtde qtde_orc" placeholder="Quant." />
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <div class="form_select_config fs_pedido">
          <select name="tamanho[8]" id="tamanho[8]" class="s_pedido">
														<option value="" selected="selected" disabled="disabled">Tamanho</option>
														<option value="Alevino">Alevino</option>
														<option value="Juvenil">Juvenil</option>
														<option value="Adulto">Adulto</option>
													</select>
        </div>
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="preco[8]" id="preco[8]" class="form-control input_qtde real valor_orc" placeholder="Preço" />
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="total[8]" id="total[8]" class="form-control input_qtde  valor_total_orc" placeholder="Total" />
      </div>
    </div>
  </div>
</div>

<div class="linha_orc">
  <div class="row">
    <div class="col-md-12">
      <div style="visibility: hidden; height: 1px;">&nbsp;</div>
      <div class="col-md-2">&nbsp;</div>
      <div class="col-md-2">&nbsp;</div>
      <div class="col-md-2">&nbsp;</div>
      <div class="col-md-2">&nbsp;</div>
      <div class="col-md-2">
        <div class="fundo_cinza">
          <div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important; color: #0C3052; margin-top: 24px;">Total</div>
        </div>
      </div>
      <div class="col-md-2">
        <input type="text" name="total_geral" id="total_geral" class="form-control input_qtde" style="background-color: #c0c0c0;" placeholder="Total" />
      </div>
    </div>
  </div>
</div>

Answer 1

Your variable $row is returning to <div> wrong and so you can’t find the elements inside her with the .find().

Change of var $row = $(this).parent()

for var $row = $(this).parent().parent();

Another thing at the end you are seeking the class element total_geral but there is no element with this class but with this id.

Change of $('.total_geral').val('R$ ' + (total_geral).formataReal(2, ',', '.'));

To $('#total_geral').val('R$ ' + (total_geral).formataReal(2, ',', '.'));

$(".real").maskMoney({
  prefix: 'R$ ',
  thousands: '.',
  decimal: ',',
  affixesStay: true
});

function rePlace(i) {
  return parseFloat(i.replace(/[^\d.,]/g, "").replace('.', '').replace(',', '.'));
}

Number.prototype.formataReal = function(c, d, t) {
  var n = this,
    c = isNaN(c = Math.abs(c)) ? 2 : c,
    d = d == undefined ? "," : d,
    t = t == undefined ? "." : t,
    s = n < 0 ? "-" : "",
    i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
    j = (j = i.length) > 3 ? j % 3 : 0;
  return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

//any time the amount changes
$(document).ready(function() {
  $('.qtde_orc, .valor_orc').change(function(e) {
    var valor_total_orc = 0;
    var $row = $(this).parent().parent();
    var valor_orc = rePlace($row.find('.valor_orc').val());
    var qtde_orc = $row.find('.qtde_orc').val();
    valor_total_orc = parseFloat(valor_orc * qtde_orc);
    //update the row total
    $row.find('.valor_total_orc').val('R$ ' + (valor_total_orc).formataReal(2, ',', '.'));

    var total_geral = 0;
    $('.valor_total_orc').each(function() {
      //Get the value
      var tg = rePlace($(this).val());
      //if it's a number add it to the total
      if (IsNumeric(tg)) {
        total_geral += parseFloat(tg);
      }
    });
    
    $('#total_geral').val('R$ ' + (total_geral).formataReal(2, ',', '.'));
  });
});

function IsNumeric(input) {
  return !isNaN(parseFloat(input)) && isFinite(input);
}

.pedido_desktop,
.nome_desktop {
  display: block;
}

.pedido_smartphone,
.nome_smartphone {
  display: none;
}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 769px) and (max-width: 991px) {}

@media (min-width: 481px) and (max-width: 768px) {
  .pedido_desktop,
  .nome_desktop {
    display: none;
  }
  .pedido_smartphone,
  .nome_smartphone {
    display: block;
  }
}

@media only screen and (max-width: 480px) {
  .pedido_desktop,
  .nome_desktop {
    display: none;
  }
  .pedido_smartphone,
  .nome_smartphone {
    display: block;
  }
}

<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://plentz.github.io/jquery-maskmoney/javascripts/jquery.maskMoney.min.js"></script>

<div class="linha_orc">
  <div class="row">


    <div class="">
      <div style="visibility: hidden; height: 1px;">
        <input name="id_item_up[7]" id="id_item_up[7]" class="checkbox-custom" type="checkbox" value="7" style="width:50%;" tabindex="18" checked>
      </div>
      <div class="col-md-2">
        <img src="/images/especies/orc/23996772607f968bd784686d66c1348a.jpg" style="margin-top: 15%;">
      </div>
      <div class="col-md-2 no_padding">
        <div class="nome_smartphone">
          <div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Black Bass</div>
        </div>
        <div class="nome_desktop">
          <p class="nome_esp input_esp">Black Bass</p>
        </div>
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="quantidade[7]" id="quantidade[7]" class="form-control input_qtde qtde_orc" placeholder="Quant." />
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <div class="form_select_config fs_pedido">
          <select name="tamanho[7]" id="tamanho[7]" class="s_pedido">
														<option value="" selected="selected" disabled="disabled">Tamanho</option>
														<option value="Alevino">Alevino</option>
														<option value="Juvenil">Juvenil</option>
														<option value="Adulto">Adulto</option>
													</select>
        </div>
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="preco[7]" id="preco[7]" class="form-control input_qtde real valor_orc" placeholder="Preço" />
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="total[7]" id="total[7]" class="form-control input_qtde  valor_total_orc" placeholder="Total" />
      </div>
    </div>




    <div class="">
      <div style="visibility: hidden; height: 1px;">
        <input name="id_item_up[8]" id="id_item_up[8]" class="checkbox-custom" type="checkbox" value="8" style="width:50%;" tabindex="18" checked>
      </div>
      <div class="col-md-2">
        <img src="/images/especies/orc/d7aff9de2ff60eade6cb39a35b1dec75.jpg" style="margin-top: 15%;">
      </div>
      <div class="col-md-2 no_padding">
        <div class="nome_smartphone">
          <div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Cachara</div>
        </div>
        <div class="nome_desktop">
          <p class="nome_esp input_esp">Cachara</p>
        </div>
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="quantidade[8]" id="quantidade[8]" class="form-control input_qtde qtde_orc" placeholder="Quant." />
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <div class="form_select_config fs_pedido">
          <select name="tamanho[8]" id="tamanho[8]" class="s_pedido">
														<option value="" selected="selected" disabled="disabled">Tamanho</option>
														<option value="Alevino">Alevino</option>
														<option value="Juvenil">Juvenil</option>
														<option value="Adulto">Adulto</option>
													</select>
        </div>
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="preco[8]" id="preco[8]" class="form-control input_qtde real valor_orc" placeholder="Preço" />
      </div>

      <div class="col-xs-6 col-sm-2 col-md-2">
        <input type="text" name="total[8]" id="total[8]" class="form-control input_qtde  valor_total_orc" placeholder="Total" />
      </div>
    </div>
  </div>
</div>

<div class="linha_orc">
  <div class="row">
    <div class="col-md-12">
      <div style="visibility: hidden; height: 1px;">&nbsp;</div>
      <div class="col-md-2">&nbsp;</div>
      <div class="col-md-2">&nbsp;</div>
      <div class="col-md-2">&nbsp;</div>
      <div class="col-md-2">&nbsp;</div>
      <div class="col-md-2">
        <div class="fundo_cinza">
          <div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important; color: #0C3052; margin-top: 24px;">Total</div>
        </div>
      </div>
      <div class="col-md-2">
        <input type="text" name="total_geral" id="total_geral" class="form-control input_qtde" style="background-color: #c0c0c0;" placeholder="Total" />
      </div>
    </div>
  </div>
</div>