Calculate percentage discount of multiple products on a product listing page

Hi i'm trying to work out the percentage discount of products that are on sale on a product listing page which have a was and now price.

I've got the code working to get the percentage discount, but i can't seem to get it to work dynamically for each product. As at the moment it'll run the calculation then print the same percentage discount per product, and even for products that are full price.

Any help on this would be appreciated. Thanks!

setTimeout(function discountPrice() {
  $('.product-slab__price').each(function() {
    var pattern = /[^0-9\.]/g;
    var wasPrice = parseFloat($(".product-price__primary .product-price__was").text().replace(pattern, "")) / 100;
    var newPrice = parseFloat($(".product-price__primary .product-price__value--discounted").text().replace(pattern, "") / 100);
    var subtractPrice = (Math.abs(wasPrice - newPrice));
    var dividePrice = (Math.abs(subtractPrice / wasPrice));
    var multiplyPrice = (Math.abs(dividePrice * 100));
    $('.discountPercentage').html(multiplyPrice.toFixed(0) + "&#37");
  });
}, 500);

.product-price__was {
  text-decoration: line-through;
}

.product-price__value.product-price__value--discounted {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">Was &euro;10,00</span>
    <span class="product-price__value product-price__value--discounted">Now &euro;8,00</span>
    <span class="discountPercentage" > </span>
  </div>
</div>

<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">&euro;15,00</span>
    <span class="product-price__value product-price__value--discounted">&euro;10,00</span>
    <span class="discountPercentage"></span>
  </div>
</div>


<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__value">&euro;15,90</span>
    <span class="discountPercentage"></span>
  </div>
</div>

Solution

The issue is because you're selecting all the elements in the DOM with those classes as you iterate through the loop.

Instead, you need to target the elements with those classes relevant to the current .product-slab__price in the iteration. To do that use the this keyword and the find() method:

setTimeout(function discountPrice() {
  var pattern = /[^0-9\.]/g;

  $('.product-slab__price:has(.product-price__value--discounted)').each(function() {
    let $slab = $(this);
    var wasPrice = parseFloat($slab.find(".product-price__primary .product-price__was").text().replace(pattern, "")) / 100;
    var newPrice = parseFloat($slab.find(".product-price__primary .product-price__value--discounted").text().replace(pattern, "") / 100);

    var subtractPrice = Math.abs(wasPrice - newPrice);
    var dividePrice = Math.abs(subtractPrice / wasPrice);
    var multiplyPrice = Math.abs(dividePrice * 100);
    
    $slab.find('.discountPercentage').html(multiplyPrice.toFixed(0) + "&#37");
  });
}, 500);

.product-price__was {
  text-decoration: line-through;
}

.product-price__value.product-price__value--discounted {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">Was &euro;10,00</span>
    <span class="product-price__value product-price__value--discounted">Now &euro;8,00</span>
    <span class="discountPercentage"> </span>
  </div>
</div>

<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">&euro;15,00</span>
    <span class="product-price__value product-price__value--discounted">&euro;10,00</span>
    <span class="discountPercentage"></span>
  </div>
</div>


<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__value">&euro;15,90</span>
    <span class="discountPercentage"></span>
  </div>
</div>

Note that as the regex content is static it can be defined outside the loop.