JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grams">1</div>
<div style="display: none;" class="grams">2</div>
<div class="milligrams">100</div>
<div class="milligrams">2</div>
<br>
<div>
Total:
</div>
<div class="servings"></div>

JavaScript

window.addEventListener('load', function() {
  let gramdivs = document.getElementsByClassName("grams");
  let milligramdivs = document.getElementsByClassName("milligrams");
  var total = 0;
  for (let item of gramdivs) {
  if (item.style.display !== "none") {
    let itemPrice=parseFloat(item.textContent);
    total += itemPrice;
    }
  }
  for (let item of milligramdivs) {
    let itemPrice=parseFloat(item.textContent);
    total = total + itemPrice / 1000;
  }
  document.getElementsByClassName("servings")[0].innerText = total.toFixed(3);
})