JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<form action="" method="post" id="nutform" onsubmit="return false;">
  <h4>Select Your Protein</h4>

  <select name="option[227]" id="input-option227" class="form-control">
    <option value=""> --- Please Select --- </option>
    <option value="17">Herb Turkey</option>
    <option value="18">Moroccan Mince</option>
    <option value="19">Cajun Chicken</option>
  </select>

  <div>
    <div id="17" class="nutritionInfo">
      <span class="caloriesSum">280</span>
      <span class="fatSum">6</span>
      <span class="satfatSum">0</span>
      <span class="carbsSum">44</span>
      <span class="proteinSum">8</span>
      <span class="sodiumSum">340</span>
      <span class="chloesterolSum">0</span>
    </div>

    <div id="18" class="nutritionInfo">
      <span class="caloriesSum">290</span>
      <span class="fatSum">6</span>
      <span class="satfatSum">2</span>
      <span class="carbsSum">49</span>
      <span class="proteinSum">9</span>
      <span class="sodiumSum">770</span>
      <span class="chloesterolSum">0</span>
    </div>

    <div id="19" class="nutritionInfo">
      <span class="caloriesSum">265</span>
      <span class="fatSum">5</span>
      <span class="satfatSum">1</span>
      <span class="carbsSum">33</span>
      <span class="proteinSum">63</span>
      <span class="sodiumSum">12</span>
      <span class="chloesterolSum">6</span>
    </div>
  </div>
  <h4>Select Your Carbs</h4>

  <select name="option[228]" id="input-option228" class="form-control">
    <option value=""> --- Please Select --- </option>
    <option value="20">Brown Rice</option>
    <option value="21">White Rice</option>
    <option value="22">Couscous</option>
  </select>
  <div id="20" class="nutritionInfo">
    <span class="caloriesSum">230</span>
    <span class="fatSum">9</span>
    <span...

CSS

.nutritionInfo {}

.nutritionInfo.active {
  color: red;
}

JavaScript

$(document).ready(function() {
  $("#nutform").on("change", "select", function() {
    $(".active").removeClass('active');
    $.each($("#nutform select"), function(index, select) {
      var changed = $(select).val();      
      $('#' + changed).addClass('active');
    });
    
    runUpdate();
  });
});

function runUpdate() {
  var calories = $(".caloriesSum", '.active').sum();
  var fat = $(".fatSum", '.active').sum();
  var satfat = $(".satfatSum", '.active').sum();
  var carbs = $(".carbsSum", '.active').sum();
  var protein = $(".proteinSum", '.active').sum();
  var sodium = $(".sodiumSum", '.active').sum();
  var chloresterol = $(".chloesterolSum", '.active').sum();

  $("#totalCalories").text(+calories.toString());
  $("#totalFat").text(+fat.toString());
  $("#totalSatFat").text(+satfat.toString());
  $("#totalCarbs").text(+carbs.toString());
  $("#totalProtein").text(+protein.toString());
  $("#totalSodium").text(+sodium.toString());
  $("#totalChloresterol").text(+chloresterol.toString());
};