Dynamic append DIV and calculate data inside the div using class name in JQuery

Question

I want to create a div to add the input field using the class name and display the value, and also create a button to add more field that has the same class as above, but only the first field can be used to add the input, I know how I tried is incorrect. I don't want to use ID, increase ID or related to ID. It may be better to increase the class name also but is there any way to keep the same class name and function working. Thanks in advance

Edited: My question part and my snippet part is not same for better understanding.

 function addMoreSchedule8WDV() { // alert('yeah'); $("#sch8_wdv").append('<div style="border-style: dotted; border-radius: 10px; border-width: thin; margin-top: 10px;">' + '<div class="col-md-12">' + '<div class="row">' + '<div class="col-md-2">' + '<label for="assetName">Name</label><br>' + '<input type="text" id="assetName" class="form-control">' + '</div>' + '<div class="col-md-2">' + '<label for="assetDOP">DOP</label><br>' + '<input type="date" id="assetDOP" class="form-control date_of_purchase">' + '</div>' + '<div class="col-md-2">' + '<label for="assetOC">OC</label><br>' + '<input type="number" min="0" id="assetOC" class="form-control originalCost">' + '</div>' + '<div class="col-md-2">' + '<label for="assetWDV">WDV</label><br>' + '<input type="number" min="0" id="assetWDV" class="form-control assWDV">' + '</div>' + '<div class="col-md-2">' + '<label for="assetADD">ADD</label><br>' + '<input type="number" min="0" id="assetADD" class="form-control addition">' + '</div>' + '<div class="col-md-2">' + '<label for="assetEUL">EUL</label><br>' + '<input type="number" min="0" id="assetEUL" class="form-control no_of_year">' + '</div>' + '</div>' + '</div>' + '<div class="col-md-12" style="padding-bottom: 10px;">' + '<div class="row">' + '<div class="col-md-2">' + '<label for="assetBDA">BDA</label><br>' + '<input type="number" readonly min="0" id="assetBDA" class="form-control bdaValue">' + '</div>' + '<div class="col-md-2">' + '<label for="assetDays">Day Used</label><br>' + '<input type="number" readonly min="0" id="assetDays" class="form-control dayUsed">' + '</div>' + '<div class="col-md-2">' + '<label for="assetRateofDep">Rate of Dep.</label><br>' + '<input type="number" readonly min="0" id="assetRateofDep" class="form-control rateOfDep">' + '</div>' + '<div class="col-md-2">' + '<label for="assetDepAmount">Dep. Amount</label><br>' + '<input type="number" readonly min="0" id="assetDepAmount" class="form-control depAmount">' + '</div>' + '<div class="col-md-2">' + '<label for="assetNetBlock">Net Block</label><br>' + '<input type="number" readonly min="0" id="assetNetBlock" class="form-control netBlock">' + '</div>' + '<div class="col-md-2">' + '<label for="removeWDV">Remove</label><br>' + '<a href="javascript:void(0);" style="width: 100%; padding-left: 5px;" class="btn btn-outline-warning removeSch8">Remove Content</a>' + '</div>' + '</div>' + '</div>' + '</div>'); $("#sch8_wdv").on("click", ".removeSch8", function() { $(this).parent().parent().parent().parent().remove(); }); } // trigger for Fixed Assets WDV $(document).on('change', '#yearEnd, .date_of_purchase, .no_of_year, .addition, .originalCost, .assWDV', function() { calculateWDVFixedAssets(); }); // end triggered function calculateWDVFixedAssets() { var current_year_input = $("#yearEnd").val() var current_year = new Date(current_year_input + '-03-31'); var last_year = current_year_input - 1; var last_year_correct = new Date(last_year + '-04-01'); var date_of_purchase = new Date($(".date_of_purchase").val()); var no_of_year = $('.no_of_year').val(); var original_cost = $('.originalCost').val(); var addition = $('.addition').val(); var wdv = $('.assWDV').val(); var bda, dayUsed; if (last_year_correct < date_of_purchase) { $(".originalCost").prop('disabled', true); } else { $(".originalCost").prop('disabled', false); } // below code is for calculate Day Used if (date_of_purchase != '') { if (date_of_purchase < last_year_correct) { dayUsed = 365; $(".dayUsed").val(dayUsed); } else if (date_of_purchase > last_year_correct && date_of_purchase < current_year) { dayUsed = Math.round(Math.abs((current_year.getTime() - date_of_purchase.getTime()) / (24 * 60 * 60 * 1000))); $(".dayUsed").val(dayUsed); } else { $(".dayUsed").val(''); $(".originalCost").val(''); console.log('error'); } } // below is for calculate BDA if (no_of_year != '') { if (date_of_purchase > last_year_correct && date_of_purchase < current_year) { bda = (no_of_year * 365); $(".bdaValue").val(bda); } else if (date_of_purchase < last_year_correct) { var bda2 = (no_of_year * 365); var year_minus = Math.round(Math.abs((last_year_correct.getTime() - date_of_purchase.getTime()) / (24 * 60 * 60 * 1000))); var total = (+bda2 - +year_minus); $('.bdaValue').val(total + 1); } else { $(".originalCost").val(''); console.log('error'); } } // rate of depreciation if (original_cost != '' || addition != '' || wdv != '') { var bdaPass = $('.bdaValue').val(); var s = ((+original_cost + +addition) * (5 / 100)); var c = (+wdv + +addition); var n = (bdaPass / 365); var xy = (s / c); var yz = (1 / n); var power = Math.pow(xy, yz); var power_new = parseFloat(power.toFixed(2)); var new_total = (1 - +power) * 100; $('.rateOfDep').val(parseFloat(new_total.toFixed(4))); // rate of depreciation var rate_of_dep = $('.rateOfDep').val(); var f_rod = ((+wdv + +addition) * (rate_of_dep / 100)); var day_used_rod = $(".dayUsed").val(); var s_rod = (day_used_rod / 365); var total_rod = (f_rod * s_rod); var round_total = Math.round(total_rod); $('.depAmount').val(round_total); // net block var f_netBlock = (+wdv + +addition); var dep_net = $('.depAmount').val(); var net_block = (+f_netBlock - +dep_net); $('.netBlock').val(parseFloat(net_block.toFixed(2))); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <p> Try inserting Year Ended = 2018, Name = Test, DOP = 1st April, 2010, OC = 1250000, wdv = 686931, add = null(no need to enter), eul = 15 then it will give the output bda=2919, day used = 365, rate of dep = 25.8986, dep amt = 177906, net block = 509025..</p> <p>Ignore the console error</p> <div class="form-group"> <label for="yearEnd">Year Ended in</label> <input type="number" min="0" name="yearEnded" id="yearEnd" class="form-control" placeholder="Eg:- 2001" required> </div> <div style="border-style: dotted; border-radius: 10px; border-width: thin;"> <div class="col-md-12"> <div class="row"> <div class="col-md-2"> <label for="assetName">Name</label><br> <input type="text" id="assetName" class="form-control"> </div> <div class="col-md-2"> <label for="assetDOP">DOP</label><br> <input type="date" id="assetDOP" class="form-control date_of_purchase"> </div> <div class="col-md-2"> <label for="assetOC">OC</label><br> <input type="number" min="0" id="assetOC" class="form-control originalCost"> </div> <div class="col-md-2"> <label for="assetWDV">WDV</label><br> <input type="number" min="0" id="assetWDV" class="form-control assWDV"> </div> <div class="col-md-2"> <label for="assetADD">ADD</label><br> <input type="number" min="0" id="assetADD" class="form-control addition"> </div> <div class="col-md-2"> <label for="assetEUL">EUL</label><br> <input type="number" min="0" id="assetEUL" class="form-control no_of_year"> </div> </div> </div> <div class="col-md-12" style="padding-bottom: 10px;"> <div class="row"> <div class="col-md-2"> <label for="assetBDA">BDA</label><br> <input type="number" readonly min="0" id="assetBDA" class="form-control bdaValue"> </div> <div class="col-md-2"> <label for="assetDays">Day Used</label><br> <input type="number" readonly min="0" id="assetDays" class="form-control dayUsed"> </div> <div class="col-md-2"> <label for="assetRateofDep">Rate of Dep.</label><br> <input type="number" readonly min="0" id="assetRateofDep" class="form-control rateOfDep"> </div> <div class="col-md-2"> <label for="assetDepAmount">Dep. Amount</label><br> <input type="number" readonly min="0" id="assetDepAmount" class="form-control depAmount"> </div> <div class="col-md-2"> <label for="assetNetBlock">Net Block</label><br> <input type="number" readonly min="0" id="assetNetBlock" class="form-control netBlock"> </div> </div> </div> </div> <div id="sch8_wdv"></div> <a href="javascript:void(0);" style=" margin-top: 10px;margin-bottom: 10px!important;" onclick="addMoreSchedule8WDV()" class="btn btn-primary btn-sm">Add More</a> 

Answer 1

Working fiddle .

You could attach the input event to both inputs at the same time as:

 $(document).on('input', '.first_no, .second_no', function() { var parent = $(this).parent(); var first_no = parent.find('.first_no').val(); var second_no = parent.find('.second_no').val(); var total = parent.find('.total'); if (!isNaN(first_no) && !isNaN(second_no)) { total.val(+first_no + +second_no); } }); function addMoreField() { $('#expanded').append( '<div><br>' + '<input type="number" class="first_no">' + ' plus ' + '<input type="number" class="second_no">' + ' is equal ' + '<input type="number" class="total">' + '</div>' ); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type="number" class="first_no"> plus <input type="number" class="second_no"> is equal <input type="number" class="total"> </div> <div id="expanded"></div> <br> <button onclick="addMoreField()">Add More</button> 

Answer 2

 var addFields = function() { var container = $(".dynamic-section"); var newFields = $(".row:first").clone(); $(newFields).find("input").val(""); container.append(newFields); }; var add = function(num1, num2) { num1 = (num1.length > 0 && !isNaN(num1)) ? parseInt(num1) : 0; num2 = (num2.length > 0 && !isNaN(num2)) ? parseInt(num2) : 0; return num1 + num2; } $(document).on("keyup", ".first,.second", function(e) { var currentRow = $(e.target.parentElement); var first = currentRow.find(".first").val(); var second = currentRow.find(".second").val(); var result = currentRow.find(".result"); result.val(add(first, second)); }); 

  body { padding: 10px; } .row { padding: 10px 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row" > <input type="number" class="first" placeholder="first"/> + <input type="number" class="second" placeholder="second"/> = <input type="number" class="result" placeholder="result"/> </div> <div class="dynamic-section"></div> <button type="button" name="addFields" onclick="addFields()">Add fields</button> 

Answer 3

Made a bit shorter version.

 $(document).on('input', '.a, .b, .c', function() { var i = $(this).parent().find('input'); i[2].value = parseInt(i[0].value) + parseInt(i[1].value); }); $('#add').on('click', function() { $('.main').append('\\ <div class="computation">\\ <input type="number" class="a"> + \\ <input type="number" class="b"> = \\ <input type="number" class="c">\\ </div>\\ '); }); 

 .computation { padding: 15px; padding-bottom: 0; } button { margin: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <div class="computation"> <input type="number" class="a"> + <input type="number" class="b"> = <input type="number" class="c"> </div> </div> <button id="add">Add more</button>