calculating and adding dynamical table row using jquery

Question

I am currently able to calculate the values of given numeric fields, and want to do the same by creating dynamic numeric fields and accessing them by their id. Here is a html snippet of the table as is:

<table class="table-responsive" id="purchaseScheduleTable">
          <tr>
              <td class="text-center"><span class="purchase_place"></span></td>
              <td class="text-center"><span class="main_products_purch"></span></td>
              <td class="text-center"><span class="frequency"></span></td>
              <td class="text-center"><span class="low"></span></td>
              <td class="text-center"><span class="high"></span></td>
              <td class="text-center"><span class="average"></span></td>
              <td class="text-center"><span class="total"></span></td>
          </tr>
          <tr>
              <td><input type="text" name="purchase_place" data-id="purchase_place" style="width: 90%;"></td>
              <td><input type="text" name="main_products_purch" style="width: 90%;" id="main_products_purch"></td>
              <td><input type="number" name="freqency" style="width: 90%;" id="frequency"></td>
              <td><input type="number" name="low" style="width: 90%;" id="product_low"></td>
              <td><input type="number" name="high" style="width: 90%;" id="product_high"></td>
              <td><input type="number" name="average" style="width: 90%;" id="product_average" disabled></td>
              <td>
                  <div class = "input-group" id="addrow">
                      <input type="text" name="product_total" style="width: 90%;" id="product_total" disabled>
                      <span class = "input-group-addon" style="width:1%; background-color:#786bae;border-color:#786bae;">
                          <a href="#">
                            <span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-plus addrow" aria-hidden="true"></span>
                          </a>
                      </span>
                  </div>
              </td>
          </tr>
      </table>

Here is a snippet of jquery code to calculate the values:

function calculate(){
    var low = 0;
    var high = 0;
    var average = 0;
    var frequency= 0;
    var total = 0;

     frequency = ($('#frequency').val() == "") ? 0 :$('#frequency').val();

    high = ($('#product_high').val() == "") ? 0 : $('#product_high').val();

   low = ($('#product_low').val() == "") ? 0 : $('#product_low').val();

   average = (parseInt(high) +  parseInt(low))/2;

   total = average * frequency;
   $('#product_total').val(total);
   $('#product_average').val(average);};

Here is also a snippet of the code that is use to trigger the calculation:

 $('input[type=number]').focusout(function() {
   calculate();
 });

I have successfully created dynamic fields and able to calculate the first row with no problem. I am able to add new table rows with no problems. However, when trying to do the same calculations as the first nothing happens. Here is the code for adding a table row dynamically:

$('#addrow').click(function (e) {
  e.preventDefault();
var purchase_schedule_row = '<tr><td><input type="text" name="purchase_place" id="purchase_place" style="width: 90%;"></td><td><input type="text" name="main_products_purch" style="width: 90%;" id="main_products_purch"></td>   <td><input type="number" name="freqency" style="width: 90%;" id="frequency"></td><td><input type="number" name="low" style="width: 90%;" id="product_low"></td> <td><input type="number" name="high" style="width: 90%;" id="product_high"></td> <td><input type="number" name="average" style="width: 90%;" id="product_average" disabled></td><td> <div class = "input-group" id="addrow">  <input type="text" name="total" style="width: 90%;" id="product_total" disabled><span class = "input-group-addon" style="width:1%; background-color:#ec6d65;border-color:#ec6d65;"><a href="#"> <span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-minus deleterow" aria-hidden="true"></span></a></span></div></td></tr>';
$('#purchaseScheduleTable').append(purchase_schedule_row);
   });

What am I doing wrong? Thanks in advance.

Answer 1

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<script>
    $(document).ready(function () {

        $('#addrow1').click(function (e) {
            e.preventDefault();
            var purchase_schedule_row = '<tr><td><input type="text" name="purchase_place" class="purchase_place" style="width: 90%;"></td><td><input type="text" name="main_products_purch" style="width: 90%;" class="main_products_purch"></td>   <td><input type="number" name="freqency" style="width: 90%;" class="frequency"></td><td><input type="number" name="low" style="width: 90%;" class="product_low"></td> <td><input type="number" name="high" style="width: 90%;" class="product_high"></td> <td><input type="number" name="average" style="width: 90%;" class="product_average" disabled></td><td> <div class = "input-group" id="addrow">  <input type="text" name="total" style="width: 90%;" class="product_total" disabled><span class = "input-group-addon" style="width:1%; background-color:#ec6d65;border-color:#ec6d65;"><a href="#"> <span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-minus deleterow" aria-hidden="true"></span></a></span></div></td></tr>';
            $('#purchaseScheduleTable').append(purchase_schedule_row);
        });

        $(document).on('focusout','input[type=number]',function () {
            calculate($(this).closest('tr'));
        });


        function calculate(ObjRow) {
            var low = 0;
            var high = 0;
            var average = 0;
            var frequency = 0;
            var total = 0;

            frequency = ($(ObjRow).find('.frequency').val() == "") ? 0 : $(ObjRow).find('.frequency').val();


            high = ($(ObjRow).find('.product_high').val() == "") ? 0 : $(ObjRow).find('.product_high').val();

            low = ($(ObjRow).find('.product_low').val() == "") ? 0 : $(ObjRow).find('.product_low').val();

            average = (parseInt(high) + parseInt(low)) / 2;

            console.info(frequency);
            console.info(high);
            console.info(low);

            total = average * frequency;
            $(ObjRow).find('.product_total').val(total);
            $(ObjRow).find('.product_average').val(average);
        }

    });


</script>



<body>
    <input type="button" id="addrow1"  value="Add Row"/>
  <table class="table-responsive" id="purchaseScheduleTable">
          <tr>
              <td class="text-center"><span class="purchase_place">purchase_place</span></td>
              <td class="text-center"><span class="main_products_purch">main_products_purch</span></td>
              <td class="text-center"><span class="frequency">frequency</span></td>
              <td class="text-center"><span class="low">low</span></td>
              <td class="text-center"><span class="high">high</span></td>
              <td class="text-center"><span class="average">average</span></td>
              <td class="text-center"><span class="total">total</span></td>
          </tr>
          <tr>
              <td><input type="text" name="purchase_place" data-id="purchase_place" style="width: 90%;"></td>
              <td><input type="text" name="main_products_purch" style="width: 90%;" class="main_products_purch"></td>
              <td><input type="number" name="freqency" style="width: 90%;" class="frequency"></td>
              <td><input type="number" name="low" style="width: 90%;" class="product_low"></td>
              <td><input type="number" name="high" style="width: 90%;" class="product_high"></td>
              <td><input type="number" name="average" style="width: 90%;" class="product_average" disabled></td>
              <td>
                  <div class = "input-group" id="addrow">
                      <input type="text" name="product_total" style="width: 90%;" class="product_total" disabled>
                      <span class = "input-group-addon" style="width:1%; background-color:#786bae;border-color:#786bae;">
                          <a href="#">
                            <span style="color:#FFFFFF;font-size:9px;line-height: 1.5;border-radius:0 !important;" class="glyphicon glyphicon-plus addrow" aria-hidden="true"></span>
                          </a>
                      </span>
                  </div>
              </td>
          </tr>
      </table>
 </body>
</html>