How to add a set of input fields in a form after filling the existing fields

Question

i am trying to do something that when you enter details in an input box in a form, to load the info with Ajax, and then add another line underneath. What i did so far, is to fill the first input box, get the data with ajax, and add a new line of input boxes. But when i am in the second line, it doesn't function properly. My code is:

 <form role="form" class="container" method="POST" id="form" action="">
    <div class="row" data-line="1">
        <div class="col-md-2">
            <div class="form-group">
                <label for="ticketNo">Ref #</label>
                <input type="text" name="ticketNo" class="form-control" id="ticketNo" ind="1" placeholder="Ref #">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="amount">Price</label>
                <input type="text" name="amount" class="form-control" id="amount" placeholder="" disabled>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="agent">Agent</label>
                <input type="text" name="agent" class="form-control" id="agent" placeholder="" disabled>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="received">Amount Received</label>
                <input type="text" name="received" class="form-control" id="received" placeholder="">
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
    $(document).ready(function () {
        var rowCntr = 1;
        $("#ticketNo").blur(function () {
            $.ajax({
                url: "payment_ss.php?action=getInfo&p="+$(this).val(),
                success: function (result) {
                    var ar = result.split("|");
                    console.log(rowCntr);
                    $(".row[data-line='"+ rowCntr +"'] #amount").val(ar[0]);
                    $(".row[data-line='"+ rowCntr +"'] #received").val(ar[0]);
                    $(".row[data-line='"+ rowCntr +"'] #agent").val(ar[1]);
                }
            });
        });
        $("#received").bind('keyup', function(e) {
            if (e.which == 13) {
                var app = $('<div class="row"><div class="col-md-2"><div class="form-group"><input type="text" name="ticketNo" class="form-control" id="ticketNo" ind="1" placeholder="Ref #"></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="amount" class="form-control" id="amount" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="agent" class="form-control" id="agent" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="received" class="form-control" id="received" placeholder=""></div></div></div>');
                $("#form").append(app);
                app.attr("data-line", rowCntr);
                $("[data-line='"+ rowCntr +"'] #ticketNo").focus();
                rowCntr++;
            }
        });
    });
</script>

Answer 1

Try

    $("#received").on( 'keyup' , function(e) {
        if (e.which == 13) {
            var app = $('<div class="row"><div class="col-md-2"><div class="form-group"><input type="text" name="ticketNo" class="form-control" id="ticketNo" ind="1" placeholder="Ref #"></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="amount" class="form-control" id="amount" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="agent" class="form-control" id="agent" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="received" class="form-control" id="received" placeholder=""></div></div></div>');
            $("#form").append(app);
            app.attr("data-line", rowCntr);
            $("[data-line='"+ rowCntr +"'] #ticketNo").focus();
            rowCntr++;
        }
    });