Untitled

  var waitForElement = function (selector, trigger, delayInterval, delayTimeout) {
    var interval = setInterval(function () {
      if (document && document.querySelector(selector) && document.querySelectorAll(selector).length > 0) {
        clearInterval(interval);
        trigger();
      }
    }, delayInterval);
    setTimeout(function () {
      clearInterval(interval);
    }, delayTimeout);
  };
  
  function limit(element)
  {
    var max_chars = 30;   
    if(element.value.length > max_chars) {
      element.value = element.value.substr(0, max_chars);
    }
  }

  var init = function () {
    
    // display number of servings per pack
    document.getElementById('4588068536393_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "18 servings (6 X 1 Liter)";
  	document.getElementById('4603460911177_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "18 servings (6 X 1 Liter)";
  	document.getElementById('4588084494409_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "18 servings (6 X 1 Liter)";
  	document.getElementById('4588087345225_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "18 servings (6 X 1 Liter)";
  	document.getElementById('4588067946569_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "18 servings (6 X 1 Liter)";
  	document.getElementById('4590292107337_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "12 servings (12 X 11.2 oz)";
  	document.getElementById('4603470512201_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "12 servings (12 X 11.2 oz)";
  	document.getElementById('4603470020681_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "12 servings (6 X 1 Liter)";
  	document.getElementById('6885857755209_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "14 servings (1 X 14 Sticks)";
  	document.getElementById('4603469070409_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "12 servings (12 X 11.2 oz)";
  	document.getElementById('4603469693001_container').querySelector('div.product-container-inner.product-container-inner--right > div.product-details > p:nth-child(2) > small').textContent = "12 servings (6 X 1 Liter)";

    // replace pack titles in dropdown
  	document.querySelector('#product-selectors option[value="40250909261897"]').textContent = '36+ Servings Pack';
  	document.querySelector('#product-selectors option[value="40250909294665"]').textContent = '24+ Servings Pack';

    // add "per serving" label near the price
    var ps = document.createElement('div');
    ps.id = 'priceperserving';
    ps.innerHTML = '<p>$<span id="perserving"></span> per serving</p>';
    var pc = document.querySelector('.price__container > .price__regular');
    pc.insertAdjacentElement('beforebegin', ps);

    // TODO => count servings in active selection
    //.products-container > .product-container.selected => get number of serving for selected item
    //.products-container > .product-container.selected .product-count input (value) => get number of units for each select item
    // purpose => get number of servings for active selection
    // default to 12 servings for items not yet selected (e.g. if 3-pack chosen in dropdown but not all 3 items have been selected)

    // TODO => update the price per serving at every change: item selection, item removal, pack change, subscription or one-off
    // price per serving = pack price / number of servings in active selection
    // document.getElementById('perserving').textContent = ;

  };

  waitForElement('#product-selectors option[value="40250909261897"]', init, 100, 25000);


  


<style>
#priceperserving {
    background: #15d3c9;
    color: #fff;
    padding: 6px 10px 2px;
    margin-right: 8px;
    border-radius: 5px;
    position: relative;
    top: -2px;
}
</style>