JSFiddle - React, Tailwind, and code Playground

by mtenschert

HTML

<div class="product">
  <div class="best-price-label ng-binding" ng-bind-html="ShowTownMobileDiscountBadge | raw">
    <span class="product__additionals__percentage">jetzt bis zu -68% bei online Reservierung</span>
    <div class="promo-inner-container bordered"><strong class="ng-binding">Gratuit pour les enfants</strong>
      <p class="ng-binding">Pour 1 adulte payant, 1 enfant gratuit jusqu'à 6 ans</p>
    </div>
  </div>
</div>

<div class="product">
  <div class="best-price-label ng-binding" ng-bind-html="ShowTownMobileDiscountBadge | raw">
    <span class="product__additionals__percentage">jetzt bis zu -38% bei online Reservierung</span>
  </div>
</div>

<div class="product">
  <div class="best-price-label ng-binding" ng-bind-html="ShowTownMobileDiscountBadge | raw">
    <span class="product__additionals__percentage">jetzt bis zu -20% bei online Reservierung</span>
  </div>
</div>

<div class="product not-in-town child-free">
  <div class="best-price-label ng-binding" ng-bind-html="ShowTownMobileDiscountBadge | raw">
    <span class="product__additionals__percentage">jetzt bis zu -27% bei online Reservierung</span>
    <div class="promo-inner-container bordered"><strong class="ng-binding">NOT in Town: Gratuit pour les enfants</strong>
      <p class="ng-binding">Pour 1 adulte payant, 1 enfant gratuit jusqu'à 6 ans</p>
    </div>
  </div>
</div>

JavaScript

var townName = "sölden";
 
 
 		var biggestDiscount = false;
    var calculateBiggestDiscount = function() {
      // extract highest discount from .product pills
      // prepare variable for all discounts
      var discounts = [];
      var product_pills_in_town = $('.product').not('.not-in-town');
      // get html string vom page containing the discount like "jetzt bis zu -27% bei online Reservierung"
      $(product_pills_in_town).find("span.product__additionals__percentage").each(function(index, variable) {
        discounts.push(+$(this).text().match(/\d+/));
      })
      // order from smallest to largest number. 
      // the biggest discount is now at the end of the array
      discounts.sort();
      if (discounts.length > 0) {
        biggestDiscount = discounts[discounts.length - 1];
      } else {
        biggestDiscount = 'Nicht verfügbar';
      }
    };
    
    
        // set intervall function for subsequent changes
    var times = 0;
    var myIntervalfunc = function() {
      times = times + 1;
      
      calculateBiggestDiscount(); // for calculateBiggestDiscount
      renderTownNameAndDiscount(townName, biggestDiscount); // for renderTownNameAndDiscount
      if (times > 3) {
        clearInterval(myInterval); // for stop intervall
      }

    }
    var myInterval = setInterval(myIntervalfunc, 2000);
    
    
    
  var renderTownNameAndDiscount = function(townName, biggestDiscount) {
      //HTML output for cont p

        
      // var for hide country discount if town discount is higher
     	var countryDiscountREST = 35;
      var countryDiscountFR	= 60;

      //HTML if statement for target_Country FR or REST
      if ( countryDiscountREST < 60) {    
        // FR output
        // hide for FR lower-important label
               
        if (biggestDiscount > countryDiscountFR) {
        $("h1.teaserNEW_flex_2 strong.lower-important").hide();
        alert("hallo");
        }

                
      } else {
        // REST...