title: How to use global function to pick up every iteration javascript
body: <p>Quite new to this, hopefully there is a simple explanation to my issue:</p>
  
  <p>Depending on which value entered in the input areas, background color changes, console log (and output in span) a "score" according to colored cell.
  Now, I want each score to be saved in variables to be used for a sum up in the end for both rows.</p>
  
  <p>Thanks in advance!</p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function update_scores(element, val)
  {
   console.log(val);
   if (val == "")
    console.log("empty");
   var scores = {};
   var data_element = $(element).closest('.my-data');
  
   for (i = 0; i &lt; 5; i++)
   {
    var index_element = "scores-e" + i;
    var data = data_element.data(index_element);
  
    if (data)
    {
     scores[i] = data;
    }
   }
  
   for (i = 0; i &lt; 5; i++)
   {
    var cell = data_element.find(".e" + i).parent();
    var vitals = scores[i];
    if (vitals)
    {
     if (val != "" &amp;&amp; (val &gt;= vitals["min"] &amp;&amp; val &lt;= vitals["max"]))
     {
      cell.css("background-color", vitals["background-color"]);
      cell.css("font-weight", "bold");
      tews_score = vitals["param-score"];
      console.log("total score:", tews_score);
      $("#total_score").text(tews_score);
     }
     else
     {
      cell.css("background-color", "white");
      cell.css("font-weight", "normal");
     }
    }
   }
  }
  
   $(document).ready(function(){
  
    $("#af").keyup(function() {
     update_scores(this, $(this).val());
    });
    
    $("#npb").keyup(function() {
     update_scores(this, $(this).val());
    });
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table, table td {
    border: 1px solid;
    border-collapse: collapse;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table&gt;
   &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;VP&lt;/td&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;2&lt;/td&gt;
   &lt;/tr&gt;
  
   &lt;tr class="my-data"
    data-scores-e0='{"min": 0, "max": 8, "background-color": "orange", "param-score": "2"}'
    data-scores-e1='{"min": 9, "max": 14, "background-color": "green", "param-score": "1"}'
    data-scores-e2='{"min": 15, "max": 20, "background-color": "yellow", "param-score": "0"}'
    data-scores-e3='{"min": 21, "max": 29, "background-color": "orange", "param-score": "1"}'
    data-scores-e4='{"min": 30, "max": 100, "background-color": "red", "param-score": "2"}'
   &gt;
    &lt;td&gt;
     &lt;p&gt;&lt;strong&gt;B&lt;/strong&gt;&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;strong&gt;Breathing/min:&lt;/strong&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p&gt;&lt;input id="af" type="number" size="1" maxlength="2"&gt;&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p class="e0"&gt;≤8&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p class="e1"&gt;9-14&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p class="e2"&gt;15-20&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p class="e3"&gt;21-29&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p class="e4"&gt;≥30&lt;/p&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;VP&lt;/td&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;2&lt;/td&gt;
   &lt;/tr&gt;
  
   &lt;tr class="my-data"
    data-scores-e0='{"min": 0, "max": 70, "background-color": "orange", "param-score": "2"}'
    data-scores-e1='{"min": 71, "max": 89, "background-color": "yellow", "param-score": "1"}'
    data-scores-e2='{"min": 90, "max": 140, "background-color": "green", "param-score": "0"}'
    data-scores-e3='{"min": 141, "max": 199, "background-color": "yellow", "param-score": "1"}'
    data-scores-e4='{"min": 200, "max": 500, "background-color": "orange", "param-score": "2"}'
   &gt;
    &lt;td&gt;
     &lt;p&gt;&lt;strong&gt;C&lt;/strong&gt;&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;strong&gt;NBP:&lt;/strong&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p&gt;&lt;input id="npb" type="number" size="1" maxlength="3"&gt;&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p class="e0"&gt;≤70&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p class="e1"&gt;71-89&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p class="e2"&gt;90-140&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p class="e3"&gt;141-199&lt;/p&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;p class="e4"&gt;≥200&lt;/p&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;div&gt;Total score: &lt;span id="total_score"&gt;&lt;/div&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>