How to divide all span . class by 3

Question

How to make these divisions and get different results for each division. The result is right only for the first price and the other results are all the same: 200.

$(document).ready(function() {
  $(".ecwid").click(function() {
    var x = parseInt($('span.ecwid-productBrowser-price-value')[0].innerHTML.replace(',', '.').substr(2))
    $("span").append("<p>3x de " + x / 3 + "</p>")
  });
});

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

<button class='ecwid'>Teste</button><br><br>

<span class='ecwid-productBrowser-price-value'>R$600,00</span>
<hr>
<span class='ecwid-productBrowser-price-value'>R$800,00</span>
<hr>
<span class='ecwid-productBrowser-price-value'>R$700,00</span>
<hr>
<span class='ecwid-productBrowser-price-value'>R$500,00</span>
<hr>

Answer 1

You gotta iterate on those span with spans.each(function() { and then use the this to do math and .append().

Example:

$(document).ready(function() {
  $(".ecwid").click(function() {
    var spans = $('span.ecwid-productBrowser-price-value');
    spans.each(function() {
      var valor = parseInt(this.innerHTML.replace(',', '.').substr(2) / 3, 10);
      $(this).append("<p>3x de " + valor + "</p>")
    });

  });
});

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

<button class='ecwid'>Teste</button><br><br>

<span class='ecwid-productBrowser-price-value'>R$600,00</span>
<hr>
<span class='ecwid-productBrowser-price-value'>R$800,00</span>
<hr>
<span class='ecwid-productBrowser-price-value'>R$700,00</span>
<hr>
<span class='ecwid-productBrowser-price-value'>R$500,00</span>
<hr>