Return last field included jQuery

Question

I have a value field with the class called .amount-debit, I automatically sum up everything that belongs to that class. How fields are included dynamically, how I could only fetch the value of the last added line?

HTML

<div id="debit-after">
    <div class="form-group">
        <div class="col-md-3">
            <div class="form-group">
                <label>Amount</label>
                <input type="text" class="form-control border-input money disabled-inputs amount-debit" id="debit[0][amount]" name="debit[0][amount]" placeholder="Amount" value="25,000.00">
            </div>
        </div>
        <div class="col-md-1" id='debit-transaction-edit'>
            <a href="#" class="remove_field_debit_edit"><i class="fa fa-trash icon-trash"></i></a>
            <a href="javascript:;" class="debit-transaction-edit"><i class="fa fa-plus icon-add"></i></a>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <div class="form-group">
                <input type="text" class="form-control border-input money disabled-inputs amount-debit" id="debit[1][amount]" name="debit[1][amount]" placeholder="Amount" value="50,000.00">
            </div>
        </div>
        <div class="col-md-1" id='debit-transaction-edit'>
            <a href="#" class="remove_field_debit_edit"><i class="fa fa-trash icon-trash"></i></a>
        </div>
    </div>
    <input type="hidden" id="debit_total_rows" name="debit_total_rows" value="2">
</div>

jQuery of the sum and inclusion

function countamountdebit(){
   var total = 0;
   $(".amount-debit").each(function(){
      total += +(this.value.replace(/,/g, ''));
   });
   $("#amount_total_debit").text(total.toLocaleString('en-US', { minimumFractionDigits: 2 }));
   set_avaliable_balance();
   set_balance_total();
}

countamountdebit();
$(document).on("keyup", ".amount-debit", countamountdebit);

$(document).ready(function() {
    $('.money').maskMoney();
    var max_fields      = 100; //maximum input boxes allowed
    var wrapper         = $("#debit-after"); //Fields wrapper
    var add_button      = $(".debit-transaction-edit"); //Add button ID
    var total_debit     = $("#debit_total_rows").val();

    var x = total_debit; //initlal text box count    
    add_button.click(function(e){ //on add input button click        
        e.preventDefault();
        $(wrapper).append('<hr/><div class="note"><div class="col-md-3"><div class="form-group"><input type="text" class="form-control border-input money amount-debit" placeholder="Amount" value="" id="debit['+ x +'][amount]" name="debit['+ x +'][amount]"></div></div><div class="col-md-3"><div class="form-group"><input type="date" class="form-control border-input" placeholder="Date" id="debit['+ x +'][ddate]" name="debit['+ x +'][ddate]"></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control border-input" id="debit['+ x +'][details]" name="debit['+ x +'][details]" placeholder="Details of Transaction"></div></div><div class="col-md-1"><a href="#" class="remove_field_debit_edit"><i class="fa fa-trash icon-trash"></i></a></div></div></div><div><hr/>'); //add input box
        $('.money').maskMoney();
        $(document).on("keyup", ".amount-debit", countamountdebit);
    });

    $(wrapper).on("click",".remove_field_debit_edit", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent().parent().remove(); x--;
        countamountdebit();
    })
}); 

I need to assemble a jQuery where you search for the last added field, with its respective value. And include in a div called "last_deposit"

How can I do that?

Answer 1

Dude, as I said I made an example for you to base. The question you can do to solve is to use the attribute last() jQuery that will always take the last existing attribute, whether from a specific class, id or element you set. With this, just take your val() and popular in other input. Since you already have a dynamic function, whenever you add or delete some input, the value will be changed to the last existing one. The only thing you need to do is add a new classto this input that is repeated so that it always identifies the last one. The test code was this:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="open-iconic-master/font/css/open-iconic.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container-fluid">
            <input type="text" class="pega-valor" placeholder="Amount" value="25,000.00">
            <input type="text" class="pega-valor" placeholder="Amount" value="30,000.00">
            <input type="text" class="pega-valor" placeholder="Amount" value="35,000.00">
            <input type="text" class="pega-valor" placeholder="Amount" value="40,000.00">
            <input type="text" class="pega-valor" placeholder="Amount" value="45,000.00">
            <input type="text" class="pega-valor" placeholder="Amount" value="50,000.00">
            <input type="text" class="pega-valor" placeholder="Amount" value="55,000.00">

            <input type="text" id="retornaValor" value="">
    </div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        var ultimo = $(".pega-valor").last().val();
        $("#retornaValor").val(ultimo);
    </script>
</body>
</html>

And the result will come out like this: