add and delete rows dynamically with textboxes using jQuery and do calculations using those dynamically added fields

Question

I want to add and delete rows dynamically with textboxes, dropdowns using jQuery and do calculations using those dynamically added fields,

I have added text boxes and dropdowns dynamically inside the table and also assigned dynamics id to each field I have added and also I have assigned id to each row added.

Screenshot of the appearance of my code

Problem

I want to row-wise calculation, please help me with how I can do calculations for each row.
I can change the value of any field any time of any row in the middle if I want to, then how can I do the calculation

how can I find rowIndex of the dynamically added row while doing the calculation in that particular row at any time?

services.js (jQuery code)

$("#frmServiceBtnAddRow").on("click", function(){

    var dataTable = document.getElementById("frmServiceTabInvoice");
    var rowCount = dataTable.rows.length;
    
    var newTableRow = '<tr id="rowIndex' + rowCount + '">' +
        '<td class="p-0">'+ rowCount +'</td>' +
        '<td class="p-0">' + 
        '   <select id="frmServiceTxb'+ rowCount + 1 + '" class="form-control calculator">' +
        '       <option value="" selected>Select</option>' +
        '       <option value="Goods"> Goods </option>' +
        '       <option value="Services"> Services </option>' +
        '   </select>' +
        '</td>' +
        '<td class="p-0">' +
        '   <select id="frmServiceTxb'+ rowCount + 2 + '" class="form-control calculator">' +
        '       <option value="" selected>Select</option>' +
        '   /select>' +
        '</td>' +
        '<td class="p-0">' + 
        '   <select id="frmServiceTxb'+ rowCount + 3 + '" class="form-control calculator">' + 
        '       <option value="" selected>Select</option>' +
        '   </select>' +
        '</td>' +
        '<td class="p-0">' +
        '   <input type="text" id="frmServiceTxb' +  rowCount + 4 + '" class="form-control text-center calculator" placeholder="0.00">' + 
        '</td>' + 
        '<td class="p-0">' + 
        '   <select id="frmServiceTxb'+ rowCount + 5 + '" class="form-control calculator">' +
        '       <option value="" selected>Select</option>' + 
        '       <option value="KILOGRAM"> KILOGRAM </option>' +
        '       <option value="LITRE"> LITRE </option>' +
        '       <option value="PIECE"> PIECE </option>' +
        '   </select>' +
        '</td>' +
        '<td class="p-0">' +
        '   <input type="text" id="frmServiceTxb' +  rowCount + 6 + '" class="form-control text-center calculator" placeholder="0.00">' +
        '</td>' +
        '<td class="p-0">' +
        '   <input type="text" id="frmServiceTxb' +  rowCount + 7 + '" class="form-control text-center calculator" placeholder="0.00">' +
        '</td>' +
        '<td class="p-0">' +
        '   <select id="frmServiceTxb'+ rowCount + 8 + '" class="form-control calculator">' +
        '       <option value="" selected>Select</option>' + 
        '       <option value="NIL"> NIL </option>' +
        '       <option value="0.01"> 0.01 </option>' +
        '       <option value="0.05"> 0.05 </option>' +
        '       <option value="1.00"> 1.00 </option>' +
        '       <option value="2.00"> 2.00 </option>' +
        '       <option value="5.00"> 5.00 </option>' +
        '       <option value="12.00"> 12.00 </option>' +
        '       <option value="18.00"> 18.00 </option>' +
        '   </select>' +
        '</td>' +
        '<td class="p-0">' +
        '   <input type="text" id="frmServiceTxb' +  rowCount + 9 + '" class="form-control text-center calculator" placeholder="0.00">' +
        '</td>' +
        '<td class="p-0">' +
        '   <input type="text" id="frmServiceTxb' +  rowCount + 10 + '" class="form-control text-center calculator" placeholder="0.00">' +
        '</td>' +
        '<td class="p-0">' +
        '   <input type="text" id="frmServiceTxb' +  rowCount + 11 + '" class="form-control text-center calculator" placeholder="0.00">' +
        '</td>' +
        '<td class="p-0">' +
        '   <input type="text" id="frmServiceTxb' +  rowCount + 12 + '" class="form-control text-center calculator" placeholder="0.00">' +
        '</td>' +
        '<td class="p-0">' +
        '   <input type="text" id="frmServiceTxb' +  rowCount + 13 + '" class="form-control text-center calculator" placeholder="0.00">' +
        '</td>' +
        '<td class="p-0">' +
        '   <input type="text" id="frmServiceTxb' +  rowCount + 14 + '" class="form-control text-center calculator" placeholder="0.00">' +
        '</td>' +
    '</tr>';
    
    $("#frmServiceTabInvoice").append(newTableRow);
});

*how can I find rowIndex of the dynamically added row* - you don't - in the input's event, use `this` to reference the input, you can then get the input's row using `$(this).closest("tr")` — freedomn-m, Aug 04 '21 at 10:09
Note, you'll need to use event delegation for your new rows. — freedomn-m, Aug 04 '21 at 10:09
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Aug 04 '21 at 10:09

add and delete rows dynamically with textboxes using jQuery and do calculations using those dynamically added fields

0 Answers0