jquery doesn't work on dynamically added table rows
<p>So I have a table wherein the user will input something and in the last column, it will be populated automatically based on the input of the other columns. It's working well enough but once i add another row to the table, it doesn't fill the last column like the original row does.</p>

<p>So my question is what's wrong and how can I fix this?</p>

<p>Thanks!</p>

<p>script for adding rows:</p>

<pre><code>$('.add_row_count').on('click',function(){
event.preventDefault();
var newRow = $('&lt;tr&gt;&lt;td style = "text-align: center;"&gt;&lt;input type="text" name="categ_name[]" id="categ_name" value="" placeholder="Item Category" required&gt;&lt;/td&gt; ' +
'&lt;td style = "text-align: center;"&gt;&lt;input type="number" name="beg_count[]" id="beg_count" value="" placeholder="BEG Count" required&gt;&lt;/td&gt;' +
'&lt;td style = "text-align: center;"&gt;&lt;input type="number" name="del_count[]" id="del_count" value="" placeholder="DEL Count" required&gt;&lt;/td&gt;' +
'&lt;td style = "text-align: center;"&gt;&lt;input type="number" name="ret_count[]" id="ret_count" value="" placeholder="RET Count" required&gt;&lt;/td&gt;' +
'&lt;td style = "text-align: center;"&gt;&lt;input type="number" name="exc_count[]" id="exc_count" value="" placeholder="EXC Count" required&gt;&lt;/td&gt;' +
'&lt;td style = "text-align: center;"&gt;&lt;input type="number" name="pout_count[]" id="pout_count" value="" placeholder="P-Out Count" required&gt;&lt;/td&gt;' +
'&lt;td style = "text-align: center;"&gt;&lt;input type="number" name="sales_count[]" id="sales_count" value="" placeholder="SALES Count" required&gt;&lt;/td&gt;' +
'&lt;td style = "text-align: center;"&gt;&lt;input type="number" name="end_count[]" id="end_count" value="" placeholder="END Count" required&gt;&lt;/td&gt;' + 
'&lt;td style = "text-align: center;"&gt;&lt;input type="number" name="actual_count[]" id="actual_count" value="" placeholder="Actual Count" required&gt;&lt;/td&gt;' +
'&lt;td style = "text-align: center;"&gt;&lt;input type="number" name="variance[]" id="variance" value="" placeholder="Variance" readonly&gt;&lt;/td&gt;' +
'&lt;td style="border-top: 1px solid white; border-bottom: 1px solid white; border-right: 1px solid white"&gt;&lt;button class="del" id="delete_row_count" type="button" onclick="deleterow_count();"&gt;Delete row&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');
 $('table.count').append(newRow);
});
</code></pre>

<p>script for populating the last column:</p>

<pre><code>      $('#categ_name,#beg_count, #del_count, #ret_count,#exc_count, #pout_count, #sales_count,#end_count, #actual_count, #variance').keyup(function (){

  var end = $('#end_count').val();
  var ac = $('#actual_count').val();

  var total_variance = end - ac;


   $('#variance').val(total_variance);     
  });
</code></pre>

<p>fiddle: <a href="https://jsfiddle.net/qhk3ha75/3/" rel="nofollow noreferrer">https://jsfiddle.net/qhk3ha75/3/</a></p>