How to pick up values contained in a table?

Question

I have a shopping cart where you bring the following information:

<tr class="rem1">
   <td class="invert">R$<span id="produto">270,00</span></td>
</tr>
<tr class="rem2">
   <td class="invert">R$<span id="produto">280,00</span></td>
</tr>
<tr class="rem3">
   <td class="invert">R$<span id="produto">290,00</span></td>
</tr>

Would you like to know how to click on the value of these products? I tried so:

$('.value-plus').on('click', function() {
            valor = document.getElementById("produto").innerHTML;
            trocar = valor.replace(",", ".");
            alert(trocar);
}

But when I click, brings only the first product (200,00).

Answer 1

It’s not ideal for you to put the same ID for several elements, as @Sergio explains in this reply.

I modified your code and took the values using the querySelectorAll, would look like this:

$('.value-plus').on('click', function() {
    var valores = document.querySelectorAll("table tr td span");
    for (i = 0; i < valores.length; i++) {
        console.log(valores[i].innerHTML);
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <tr class="rem1">
      <td class="invert">R$<span>270,00</span></td>
   </tr>
   <tr class="rem2">
      <td class="invert">R$<span>280,00</span></td>
   </tr>
   <tr class="rem3">
      <td class="invert">R$<span>290,00</span></td>
   </tr>
</table>
<button class='value-plus'>Pegar Valores</button>

Answer 2

id is an attribute that cannot be repeated, apart from not being semantic, document.getElementById will always return only one element. I suggest changing to any other selector (like class for example):

$('.value-plus').on('click', function() {
  let elementos = document.getElementsByClassName("produto");
  let valores = [];
  for (let i = 0; i < elementos.length; i++) {
    valores.push(elementos[i].innerHTML.replace(",", "."));
  };
  console.log(valores);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="rem1">
  <td class="invert">R$<span class="produto" id="produto">270,00</span></td>
</tr>
<tr class="rem2">
  <td class="invert">R$<span class="produto" id="produto">280,00</span></td>
</tr>
<tr class="rem3">
  <td class="invert">R$<span class="produto" id="produto">290,00</span></td>
</tr>
<button class="value-plus">Checar</button>

Answer 3

The attribute id html should be unique, so it just brings the first.

You could select your items and from that selection. you could go through with the method $.each(function(index, item){}) jQuery.

Would that way:

$('.value-plus').on('click', function(){

  var lista = $('.invert > span');
  
  $.each(lista, function(index,item){
  
    valor = $(item).text();
    trocar = valor.replace(",",".");
    alert(trocar);
  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rem1">
<td class="invert">R$<span id="produto">270,00</span></td>
</tr>
<tr class="rem2">
<td class="invert">R$<span id="produto">280,00</span></td>
</tr>
<tr class="rem3">
<td class="invert">R$<span id="produto">290,00</span></td>
</tr>
</table>
<button id="myButton" class="value-plus">Pegar Valores</button>