Dynamic Jquery table constructed using ajax response data on textbox's each keyup event, not showing data of last ajax response (last keyup)

I am using ajax to fetch row data for a table based on the input entered in a textbox.

In my case, pincode input '1000' fetches 10 location rows and input '10007' fetches one row.

Following is the js code

 $('#pincode').keyup(function(event){
    var currentElementId = $(this).attr('id');
    enterlocation = document.getElementById(currentElementId).value;
    var len = enterlocation.length;

    if (len != null && len > 2 && event.which != 8) {
    var lastRequestTimeStamp = new Date().getTime();
        $.ajax({
            type : "GET",
            url : "/abc.htm",
            cache : false,
            contentType : "application/json;charset=utf-8",
            dataType : 'json',
            data : {
                searchKey : enterlocation, lastRequestTimeStampSent : lastRequestTimeStamp},
            beforeSend : function() {
                $("#mytable").remove();
            },
            success : function(response) {
            var locations = response;
            var sentTimeStamp = parseInt(lastRequestTimeStamp, 10);
            var recievedTimestamp = parseInt(locations[0].requestTimeStamp, 10);
                $("#mytable").show();
                var locations = response;

                if (currentElementId == "pincode") {
                    $("#div1").append('<table id="mytable"></table>');
                }
                if (currentElementId == "city") {
                    $("#div2").append('<table id="mytable"></table>');
                }
                if (currentElementId == "street") {
                    $("#div3").append('<table id="mytable"></table>');
                }


                if ((sentTimeStamp == recievedTimestamp) && locations != null && locations.length > 0) {
                    $.each(locations, function(index, location) {
                        var locationRow = '<tr id="locationRowId'+index+'">' +
                        '<td>' +    
                        '<input type= "hidden" id ="hSugAddrLine1'+index+'" name ="hSugAddrLine1'+index+'" value="'+replaceNullwithBlank(location.addressLine1)+'">' +
                        '</td></tr>';

                        if ($("#mytable").children().length == 0) {
                            $("#mytable").append(locationRow);
                        } else {
                            $("#mytable").find('tbody:last').append(locationRow);
                        }
                    });
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert("@Error");
                console.log(textStatus, errorThrown);
            },
            complete : function() {
                $("#mytable").show();
                //$("#mytable").table("refresh");
            }
        });
    }

});

As I enter 10007 swiftly in the input box, what I get in the table is the response data for the pincode '1000' in most cases or response data for pincode '100' in some cases.

But when I enter '10007' slowly in the input text box, I get the correct ajax response data in the table as meant for input '10007'.

It appears to me some slow rendering issue. As mentioned, input '1000' response data is larger than that of '10007', so I think previous ajax call larger data is rendering on table even after next ajax call response is rendering. Being new and naive for jquery and ajax, I am quite brainstorming here. Help please!