title: change the style if number is more than value from radio value
body: <p>So I have a radio group at the top that outputs the value to a span... Then I have color swatches that adds up the total in a input (or span). What I am wanting to do is change the color of the text to a a bold red if it goes over the radio button value. It is updating dynamically, but I am wondering if I can use a php if statement to change the style. Here is the code for the page.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link href="style/site-main.css" rel="stylesheet" type="text/css"&gt;
  
  &lt;script&gt;
  // When the page is ready
  $(document).ready(function() {
      $("input").click(function(event) {
          updateTotal();
      });
  });
  
  function updateTotal() {
      var total = 0;
      $("input:checked").each(function() {
          total += parseFloat(this.title);
      });
      $('#TotalCost').val("$" + total.toFixed(2));
  }
  
  &lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $('input[type="radio"]').click(function(){
          if($(this).attr("value")=="5"){
              $(".box").not(".5").hide();
              $(".5").show();
          }
          if($(this).attr("value")=="10"){
              $(".box").not(".10").hide();
              $(".10").show();
          }
          if($(this).attr("value")=="25"){
              $(".box").not(".25").hide();
              $(".25").show();
          }
          if($(this).attr("value")=="50"){
              $(".box").not(".50").hide();
              $(".50").show();
          }
      });
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function sum() {
          var clr000 = document.getElementById('000').value;
          var clr010 = document.getElementById('010').value;
          var clr020 = document.getElementById('020').value;
          var clr019 = document.getElementById('019').value;
          var clr021 = document.getElementById('021').value;
          var clr022 = document.getElementById('022').value;
          var clr025 = document.getElementById('025').value;
          var clr026 = document.getElementById('026').value;
          var clr312 = document.getElementById('312').value;
          var clr030 = document.getElementById('030').value;
          var clr031 = document.getElementById('031').value;
          var clr032 = document.getElementById('032').value;
          var clr047 = document.getElementById('047').value;
          var clr034 = document.getElementById('034').value;
          var clr036 = document.getElementById('036').value;
          var clr035 = document.getElementById('035').value;
          var clr404 = document.getElementById('404').value;
          var clr040 = document.getElementById('040').value;
          var clr043 = document.getElementById('043').value;
          var clr042 = document.getElementById('042').value;
          var clr041 = document.getElementById('041').value;
          var clr045 = document.getElementById('045').value;
          var clr562 = document.getElementById('562').value;
          var clr518 = document.getElementById('518').value;
          var clr050 = document.getElementById('050').value;
          var clr065 = document.getElementById('065').value;
          var clr049 = document.getElementById('049').value;
          var clr086 = document.getElementById('086').value;
          var clr067 = document.getElementById('067').value;
          var clr057 = document.getElementById('057').value;
          var clr051 = document.getElementById('051').value;
          var clr098 = document.getElementById('098').value;
          var clr052 = document.getElementById('052').value;
          var clr084 = document.getElementById('084').value;
          var clr053 = document.getElementById('053').value;
          var clr056 = document.getElementById('056').value;
          var clr066 = document.getElementById('066').value;
          var clr054 = document.getElementById('054').value;
          var clr055 = document.getElementById('055').value;
          var clr060 = document.getElementById('060').value;
          var clr613 = document.getElementById('613').value;
          var clr061 = document.getElementById('061').value;
          var clr068 = document.getElementById('068').value;
          var clr062 = document.getElementById('062').value;
          var clr064 = document.getElementById('064').value;
          var clr063 = document.getElementById('063').value;
          var clr080 = document.getElementById('080').value;
          var clr083 = document.getElementById('083').value;
          var clr081 = document.getElementById('081').value;
          var clr082 = document.getElementById('082').value;
          var clr023 = document.getElementById('023').value;
          var clr070 = document.getElementById('070').value;
          var clr073 = document.getElementById('073').value;
          var clr071 = document.getElementById('071').value;
          var clr076 = document.getElementById('076').value;
          var clr074 = document.getElementById('074').value;
          var clr072 = document.getElementById('072').value;
          var clr090 = document.getElementById('090').value;
          var clr091 = document.getElementById('091').value;
          var clr092 = document.getElementById('092').value;
  
          var result = parseInt(clr000) + parseInt(clr010) + parseInt(clr020) + parseInt(clr019) + parseInt(clr021) + parseInt(clr022) + parseInt(clr025) + parseInt(clr026) + parseInt(clr312) + parseInt(clr030) + parseInt(clr031) + parseInt(clr032) + parseInt(clr047) + parseInt(clr034) + parseInt(clr036) + parseInt(clr035) + parseInt(clr404) + parseInt(clr040) + parseInt(clr043) + parseInt(clr042) + parseInt(clr041) + parseInt(clr045) + parseInt(clr562) + parseInt(clr518) + parseInt(clr050) + parseInt(clr065) + parseInt(clr049) + parseInt(clr086) + parseInt(clr067) + parseInt(clr057) + parseInt(clr051) + parseInt(clr098) + parseInt(clr052) + parseInt(clr084) + parseInt(clr053) + parseInt(clr056) + parseInt(clr066) + parseInt(clr054) + parseInt(clr055) + parseInt(clr060) + parseInt(clr613) + parseInt(clr061) + parseInt(clr068) + parseInt(clr062) + parseInt(clr064) + parseInt(clr063) + parseInt(clr080) + parseInt(clr083) + parseInt(clr081) + parseInt(clr082) + parseInt(clr023) + parseInt(clr070) + parseInt(clr073) + parseInt(clr071) + parseInt(clr076) + parseInt(clr074) + parseInt(clr072) + parseInt(clr090) + parseInt(clr091) + parseInt(clr092);
              if (!isNaN(result)) {
                  document.getElementById('ttlQty').value = result;
              }
          }
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="header"&gt;
        &lt;h3&gt;Package Size&lt;/h3&gt; 
  &lt;div class="PackContainer"&gt;
  &lt;div class="radioBtn"&gt;
        &lt;label&gt;&lt;input type="radio" onclick="myFunction(this.value)" name="packSize" value="5"&gt; 5 sheets&lt;/label&gt;
          &lt;label&gt;&lt;input type="radio" onclick="myFunction(this.value)" name="packSize" value="10"&gt; 10 sheets&lt;/label&gt;
          &lt;label&gt;&lt;input type="radio" onclick="myFunction(this.value)" name="packSize" value="25"&gt; 25 sheets&lt;/label&gt;
          &lt;label&gt;&lt;input type="radio" onclick="myFunction(this.value)" name="packSize" value="50"&gt; 50 sheets&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="5 box"&gt;$4.45&lt;/div&gt;
      &lt;div class="10 box"&gt;$8.40&lt;/div&gt;
      &lt;div class="25 box"&gt;$18.75&lt;/div&gt;
      &lt;div class="50 box"&gt;$27.50&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="main"&gt;
  &lt;div class="counter"&gt; &lt;input type="text" id="ttlQty" /&gt; of &lt;span id="result"&gt;&lt;/span&gt; remaining.  &lt;/div&gt;
    &lt;h3&gt;Colors&lt;/h3&gt;
    &lt;div class="colorDiv"&gt;
  &lt;div class="colorBlock" style="background-color:#DCD9E0;"&gt;000 clear&lt;input type="text" id="000" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#E8E9ED;"&gt;010 white&lt;input type="text" id="010" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#FFAB00;"&gt;020&lt;input type="text" id="020" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#E8A800;"&gt;019&lt;input type="text" id="019" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#FEC600;"&gt;021&lt;input type="text" id="021" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#F5CA01;"&gt;022&lt;input type="text" id="022" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#F3E111;"&gt;025&lt;input type="text" id="025" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#64000D;"&gt;026&lt;input type="text" id="026" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#74000D;"&gt;312&lt;input type="text" id="312" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#960816;"&gt;030&lt;input type="text" id="030" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#B8000C;"&gt;031&lt;input type="text" id="031" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#D10800;"&gt;032&lt;input type="text" id="032" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#DA2F01;"&gt;047&lt;input type="text" id="047" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#E44B00;"&gt;034&lt;input type="text" id="034" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#EF6701;"&gt;036&lt;input type="text" id="036" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#FF6E01;"&gt;035&lt;input type="text" id="035" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#422871;"&gt;404&lt;input type="text" id="404" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#5F2C65;"&gt;040&lt;input type="text" id="040" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#785E9F;"&gt;043&lt;input type="text" id="043" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#BC91BC;"&gt;042&lt;input type="text" id="042" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#C92A6A;"&gt;041&lt;input type="text" id="041" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#F385B6;"&gt;045&lt;input type="text" id="045" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock dark" style="background-color:#141D3A;"&gt;562&lt;input type="text" id="562" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock dark" style="background-color:#12143D;"&gt;518&lt;input type="text" id="518" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock dark" style="background-color:#1C2E5C;"&gt;050&lt;input type="text" id="050" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock dark" style="background-color:#10226A;"&gt;065&lt;input type="text" id="065" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#142978;"&gt;049&lt;input type="text" id="049" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#0F32AA;"&gt;086&lt;input type="text" id="086" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#003979;"&gt;067&lt;input type="text" id="067" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#013F8C;"&gt;057&lt;input type="text" id="057" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#014584;"&gt;051&lt;input type="text" id="051" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#014FA2;"&gt;098&lt;input type="text" id="098" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#015CAB;"&gt;052&lt;input type="text" id="052" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#0173BC;"&gt;084&lt;input type="text" id="084" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#0187C4;"&gt;053&lt;input type="text" id="053" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#3BA0D4;"&gt;056&lt;input type="text" id="056" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#007F8E;"&gt;066&lt;input type="text" id="066" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#009999;"&gt;054&lt;input type="text" id="054" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#5BCAB7;"&gt;055&lt;input type="text" id="055" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock dark" style="background-color:#013F28;"&gt;060&lt;input type="text" id="060" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#005037;"&gt;613&lt;input type="text" id="613" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#00784B;"&gt;061&lt;input type="text" id="061" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#007843;"&gt;068&lt;input type="text" id="068" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#00863F;"&gt;062&lt;input type="text" id="062" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#1E9903;"&gt;064&lt;input type="text" id="064" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#69A62D;"&gt;063&lt;input type="text" id="063" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock dark" style="background-color:#442F1E;"&gt;080&lt;input type="text" id="080" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#B3591D;"&gt;083&lt;input type="text" id="083" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#AA885B;"&gt;081&lt;input type="text" id="081" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#CFBF9E;"&gt;082&lt;input type="text" id="082" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#EFD394;"&gt;023&lt;input type="text" id="023" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock dark" style="background-color:#0E0E10;"&gt;070&lt;input type="text" id="070" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#4C4C4C;"&gt;073&lt;input type="text" id="073" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#747D7C;"&gt;071&lt;input type="text" id="071" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#818588;"&gt;076&lt;input type="text" id="076" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#8A8F8B;"&gt;074&lt;input type="text" id="074" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#BFC1BE;"&gt;072&lt;input type="text" id="072" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#696A6C;"&gt;090&lt;input type="text" id="090" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#776233;"&gt;091&lt;input type="text" id="091" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
  &lt;div class="colorBlock" style="background-color:#6E401C;"&gt;092&lt;input type="text" id="092" value="0" onkeyup="sum();" /&gt;&lt;br&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
  function hideshow(which){
  if (!document.getElementById)
  return
  if (which.style.display=="none")
  which.style.display="block"
  else
  which.style.display="none"
  }
    &lt;/script&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
  
  &lt;script&gt;
  function myFunction(packSize) {
      document.getElementById("result").innerHTML = packSize;
  }
  &lt;/script&gt;
  
      &lt;div style="right:10px;"&gt;&lt;strong&gt;PACKAGE PRICE&lt;/strong&gt;&lt;br&gt;
  &lt;input name="TotlCost" type="text" id="TotalCost" style="border:1px solid #fff; text-align:right; font-size:38px; font-weight:bolder; color:#3FA9F5; background-color:#333;"  value="$0.00" size="10" readonly/&gt;
  &lt;/div&gt;&lt;!-- Quantity DIVS --&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>