sum total of values inside dynamic inputs with same class and Auto re-sum total of values when I change any input values or add / delete dynamic row

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$("#add-btn").click(function() {
$("#dynamic").append('<tr>' +
'<td class="td">' +
'<input type="number" name="Debit" class="form-control Debit"/>' +
'</td>' +
'<td class = "td" >' +
'<input type = "number" class = "form-control credit" />' +
'</td>' +
'<td class = "td2" >' +
'<button type = "button" name = "add" class = "btn btn-danger remove-tr" > Remove </button>' +
'</td>' +
'</tr>');
});
$(document).on('click', '.remove-tr', function() {
$(this).parents('tr').remove();
});
$(document).ready(function() {
var total = 0;
$('.Debit').each(function() {
total += parseFloat($(this).val());
$('.sum_of_Debit').val(total);
});
$(".Debit").on("change keyup", function() { 
var sum = 0;
sum += parseFloat($('.sum_of_ Debit').val());
$('.sum_of_Debit').val(sum);
});
});
$(document).ready(function() {
var total = 0;
$('.credit').each(function() {
total += parseFloat($(this).val());
$('.sum_of_credit').val(total);
});
$(".credit").on("change keyup", function() { 
var sum = 0;
sum += parseFloat($('.sum_of_credit').val());
$('.sum_of_credit').val(sum);
});
});

<!-- language: lang-html -->

<table id="dynamic">
<tr>
<th class="wd-15p fontColor">credit</th>
<th class="wd-15p fontColor">Debit</th>
</tr>
<tr>
<td class="td"><input type="number" value="1000" class="form-control credit" /></td>
<td class="td"><input type="number" value="1000"class="form-control Debit" /></td>
</tr>
<tr>
<td class="td"><input type="number" value="1000" class="form-control credit" /></td>
<td class="td"><input type="number" value="1000"  class="form-control Debit" /></td>
</tr>
<tr>
<td class="td"><input type="number" value="1000" class="form-control credit" /></td>
<td class="td"><input type="number" value="1000" class="form-control Debit" /></td>
<td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="text" class="form-control sum_of_credit" readonly>
<input type="text" class="form-control sum_of_Debit" readonly>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<!-- end snippet -->

What is required ??? I want to get the total sum of the values inside the inputs in each of the following cases: When changing any value in the input, the total of values should be re-sum based on the values that were entered. And when adding a new dynamic row and writing new values in the new input this value should be added to the sum total, that is, the total should be recalculated and this new value that was entered should be included in the total sum. When deleting a dynamic row, the sum should be recalculated and the values that were in the deleted row should be excluded, i.e. the value of this row should be deleted from the grand total.

EDIT: Fixed the issue, event is added to all elements now

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
reCalculate();
$("#add-btn").click(function() {
$("#dynamic").append('<tr>' +
'<td class="td">' +
'<input type="number" value= "1000" name="quantity" class="form-control quantity"/>' +
'</td>' +
'<td class = "td" >' +
'<input type = "number" value = "1000" name = "amount" class = "form-control amount"/>' +
'</td>' +
'<td class = "td2" >' +
'<button type = "button" name = "add" class = "btn btn-danger remove-tr" > Remove </button>' +
'</td>' +
'</tr>');
reCalculate();
});
// Add on change/keyup to dynamically added elements with event delegation like this
$('#dynamic').on('change keyup', '.quantity, .amount', function() {
reCalculate();
});
$(document).on('click', '.remove-tr', function() {
$(this).parents('tr').remove();
reCalculate();
});
function reCalculate() {
let totalQty = 0;
let amountQty = 0;
$('.quantity').each(function() {
totalQty += parseFloat($(this).val() || 0);
$('.sum_of_quantity').val(totalQty);
});
$('.amount').each(function() {
amountQty += parseFloat($(this).val() || 0);
$('.sum_of_amount').val(amountQty);
});
}
});

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<table id="dynamic">
<tr>
<th class="wd-15p fontColor">Quantity</th>
<th class="wd-15p fontColor">Amount</th>
</tr>
<tr>
<td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity" /></td>
<td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount" /></td>
</tr>
<tr>
<td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity" /></td>
<td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount" /></td>
</tr>
<tr>
<td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity" /></td>
<td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount" /></td>
<td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>
</tr>
</table>
<table>
<tr>
<td><input type="text" class="form-control sum_of_quantity" readonly> </td>
<td><input type="text" class="form-control sum_of_amount" readonly></td>
</tr>
</table>

<!-- end snippet -->

add this to your code :

$("body").on('keyup change', '.credit, .Debit', function (){
reCalculate();
});