Changing the value of a Slider in each row of the table

I'm having problems, I don't have much experience with JavaScript and jQuery and need to do the following.

I have a table, which each row is a product and has a value.

I need to add a percentage to this value according to the value of a slider.

So for example, if the cost of a product is 0.10, if I move the slider to 10, add 10% on this value and update the same.

The problem is that with the code below I do not I'm managing to do for every line.

I've tried everything, but the maximum I got is where it took the first line, but adds this value in all lines.

I needed a way to move the slider and just modify the p tag of that line and not the others.

I also need to have this function on all rows (it is currently only working on the first).

I am using a function in JavaScript to add the items in the table, code below.

Very likely to be a simple solution, I count on the support of the experts.

/*    myRange - Slider ID
    prod - table id;
    .teste -  classe a tag p onde tem o preço.
*/
    //slider
    $('#prod').on('click', '#myRange', function () {
        var slider = document.getElementById('myRange');
        slider.oninput = function() {
          $('.teste').closest("p").html(slider.value);
          console.log(slider.value);
          //output.innerHTML = slider.value;
          }
      } );
  // Listar todos os produtos
  $("#add-all").click(function() {
    // Listar todos os itens.
    for (i = 0; i < Items.length; i++) {
      var id = Items[i].id;
      var nome = Items[i].Nome;
      var descri = Items[i].Descricao;
      var emb = Items[i].Embalagem;
      var lab = Items[i].Laboratorio;
      var gen = Items[i].Generico;
      var rsm = Items[i].RSM;
      var rsmnew = rsm.slice(0, 9);
      var val = Items[i].Vunit;
      var valF = "TBD";
      var markup = "<tr><td>" + nome + "</td>" +
        "<td>" + descri + "</td>" +
        "<td>" + emb + "</td>" +
        "<td>" + lab + "</td>" +
        "<td>" + gen + "</td>" +
        "<td><a target='_blank' href='http://www.smerp.com.br/anvisa/?ac=out&anvisaId=" + rsmnew + "'>" + rsm + "</a></td>" +
        "<td><p class='custo' id='" + id + "'>" + val + "</p><a class='editar' data-toggle='modal' data-nome='" + nome + "' data-id='" + id + "' data-descri='" + descri + "' data-target='#changePrice'><i class='fas fa-edit iconeE' title='Editar'></i></a></td>" +
        "<td><p class='teste'>" + valF + "</p><a class='remover'><i class='fas fa-minus-circle icone' title='Ocultar'></i></a><br><input style='width:70px;' type='range' id='myRange' min='-20' max='60' value='0' class='custom-range'></td>'";
      var markup1 = "<tr><td>" + nome + "</td>" +
        "<td>" + descri + "</td>" +
        "<td>" + emb + "</td>" +
        "<td>" + lab + "</td>" +
        "<td>" + gen + "</td>" +
        "<td><a target='_blank' href='http://www.smerp.com.br/anvisa/?ac=out&anvisaId=" + rsmnew + "'>" + rsm + "</a></td>" +
        "<td>" + val + "</td>" +
        "<td><p class='teste'>" + valF + "</p><a class='remover'><i class='fas fa-minus-circle icone' title='Ocultar'></i></a><br><input style='width:70px;' type='range' id='myRange' min='-20' max='60' value='0' class='custom-range'></td>'";
      if ($("#userType").attr("value") == "user") {
        $("table tbody").append(markup1);
      }
      if ($("#userType").attr("value") == "adm") {
        $("table tbody").append(markup);
      }
    }
  });

table

Author: Sam, 2019-07-30
Source

1 answers

The first problem is that you are repeating the id #myRange. Only then will it give problem in the event selector click. An id must be unique on the page. When you are going to use multiple similar elements, you should use class instead of id. Then exchange the id="myRange" for class="myRange".

Another thing that will make it easier is to add a data-* in td that has the value. It can be data-val, like this: 

"<td data-val='"+val+"'>" + val + "</td>" +

Since you want to change the val that is inside the td, the data-val will remain static and where you will take the value to do the calculation and play inside the td.

What you have to do is take the parent td of the slider range and fetch the previous td. This previous td is where you will take the value of the item and change the text.

And since you're using jQuery, you don't need to mix with pure JavaScript. You can do everything in the jQuery syntax itself, like this: 

$(document).on("input", ".myRange", function(){
   var valor = $(this).closest("td").prev("td").data("val");
   valor += valor * this.value/100;
   $(this).closest("td").prev("td").text(valor);
   // pode apagar as duas linhas abaixo
   console.clear();
   console.log(this.value);
});

An example of the functionality: 

var Items = [
   {
      id: "1", Vunit: "10"
   },
   {
      id: "2", Vunit: "30"
   }
];
//Listar todos os produtos
  $("#add-all").click(function() {
    // Listar todos os itens.
    for (i = 0; i < Items.length; i++) {
      var id = Items[i].id;
      var nome = Items[i].Nome;
      var descri = Items[i].Descricao;
      var emb = Items[i].Embalagem;
      var lab = Items[i].Laboratorio;
      var gen = Items[i].Generico;
      var rsm = Items[i].RSM;
      var rsmnew = "";
      var val = Items[i].Vunit;
      var valF = "TBD";
      var markup = "<tr><td>" + nome + "</td>" +
        "<td>" + descri + "</td>" +
        "<td>" + emb + "</td>" +
        "<td>" + lab + "</td>" +
        "<td>" + gen + "</td>" +
        "<td><a target='_blank' href='http://www.smerp.com.br/anvisa/?ac=out&anvisaId=" + rsmnew + "'>" + rsm + "</a></td>" +
        "<td data-val='"+val+"'><p class='custo' id='" + id + "'>" + val + "</p><a class='editar' data-toggle='modal' data-nome='" + nome + "' data-id='" + id + "' data-descri='" + descri + "' data-target='#changePrice'><i class='fas fa-edit iconeE' title='Editar'></i></a></td>" +
        "<td><p class='teste'>" + valF + "</p><a class='remover'><i class='fas fa-minus-circle icone' title='Ocultar'></i></a><br><input style='width:70px;' type='range' class='myRange' min='-20' max='60' value='0' class='custom-range'></td>'";


      var markup1 = "<tr><td>" + nome + "</td>" +
        "<td>" + descri + "</td>" +
        "<td>" + emb + "</td>" +
        "<td>" + lab + "</td>" +
        "<td>" + gen + "</td>" +
        "<td><a target='_blank' href='http://www.smerp.com.br/anvisa/?ac=out&anvisaId=" + rsmnew + "'>" + rsm + "</a></td>" +
        "<td data-val='"+val+"'>" + val + "</td>" +
        "<td><p class='teste'>" + valF + "</p><a class='remover'><i class='fas fa-minus-circle icone' title='Ocultar'></i></a><br><input style='width:70px;' type='range' class='myRange' min='-20' max='60' value='0' class='custom-range'></td>'";
        $("table tbody").append(markup1);
    }
  });

$(document).on("input", ".myRange", function(){
   var valor = $(this).closest("td").prev("td").data("val");
   valor += valor * this.value/100;
   $(this).closest("td").prev("td").text(valor);
   // pode apagar as duas linhas abaixo
   console.clear();
   console.log(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tbody>
   </tbody>
</table>
<button id="add-all">Add</button>
 1
Author: Sam, 2019-07-30 14:58:40