title: Performing calculations on dynamically generated rows (jQuery)
body: <p>I am trying to perform some calculations on some dynamically generated rows in my table.The dropdowm options all carry numerical values and based on the values the RiskOfObsctacle and ValueOfObstacle will be calculated:<br>
  ValueOfObstacle= Likelihood<em>Severity</em>Principal;<br>
  RiskOfObsctacle= Likelihood*Severity;</p>
  
  <p>I dont have any problem adding/deleting rows but the problem is displaying the results after values are entered.</p>
  
  <p>Here is my jquery code for generating the rows:</p>
  
  <pre><code>function addRow(tableID) { 
  
  var table = document.getElementById(tableID);
  
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  
  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.name="chkbox[]";
  cell1.appendChild(element1);
  
  var cell2 = row.insertCell(1);
  cell2.innerHTML="&lt;textarea name='Obstacle[]' cols='20'&gt;";
  
  var cell3 = row.insertCell(2);
  cell3.innerHTML = "&lt;select name='Likelihood[]'&gt; onKeyup='calc() &lt;option value='1'&gt;Low&lt;/option&gt; &lt;option value='2'&gt;Medium&lt;/option&gt;&lt;option value='3'&gt;High&lt;/option&gt;/&gt;";
  
  var cell4 = row.insertCell(3);
  cell4.innerHTML = "&lt;select name='Severity[]'&gt; onKeyup='calc() &lt;option value='1'&gt;Low&lt;/option&gt; &lt;option value='2'&gt;Medium&lt;/option&gt;&lt;option value='3'&gt;High&lt;/option&gt;/&gt;";
  
  var cell5 = row.insertCell(4);
  cell5.innerHTML = "&lt;select name='Priority[]'&gt; onKeyup='calc() &lt;option value='1'&gt;Low&lt;/option&gt; &lt;option value='2'&gt;Medium&lt;/option&gt;&lt;option value='3'&gt;High&lt;/option&gt;/&gt;";
  
  var cell6 = row.insertCell(5);
  cell6.innerHTML = "&lt;input type = 'text' name='Principal[]' required placeholder='100.3' onKeyup='calc()'&gt;";
  
  var cell7 = row.insertCell(6);
  cell7.innerHTML = "&lt;input type = 'text' name='ObsRisk[]'  readonly value onKeyup='calc()'&gt;";
  
  
  var cell8 = row.insertCell(7);
  cell8.innerHTML = "&lt;input type = 'text' name='ObsValue[]' readonly onKeyup='calc()'&gt;";
  
  }
  </code></pre>
  
  <p>And here is the code for performing calculations:</p>
  
  <pre><code>function calc (){
  $('.Likelihood, .Severity, .Principal').change(function(){
  var value = 0;
  var $row = $(this).closest("tr");
  var like = parseFloat($row.find('Likelihood').val());
  var sev = parseFloat($row.find('Severity').val());
  var prin = parseFloat($row.find('Principal').val());
  value = like*sev*prin;
  if (isNaN(value)) {
  $row.find('.ObsValue').value("Nix is");
  }
  else{
  $row.find('.ObsValue').val(value);
  }
  calc();
  });
  }
  </code></pre>
  
  <p>Also based on the results the color of the text should change i.e. green if positive and red if negative. Thanks for the help.</p>
  
  <p><img src="https://i.stack.imgur.com/Yq05K.png" alt="Obstacle Table"></p>
  
  <p>Please, let me know if more info is needed!</p>