add data using on click when looping

Your variable a is bind to its latest value, so it won't work. You need to make a copy of a:

var i = $('table tr').length;
var count = $('table tr').length;
var row = i;
var a = 0;

for (a = 0; a <= i; a++) {
  $(".addmore_" + a).on('click', function (_a) {
    return function() {
      var data = "<input class='form-control' type='text' id='packinglist_" + _a + "' name='packinglist[]'/>";
      $("#keatas_" + _a).append(data);
    } ;
  } (a));
};

Explanation:

I will use setTimeout instead of your custom callback because it is easier to see what happen. Let's start with a simple example:

for (var i = 0 ; i < 5 ; i++) {
    setTimeout (function () {
        console.log(i) ;
    }, 250) ;
}

If you don't know setTimeout, it will simply call the function you specified (first argument) after the amount of time specified by the second argument (in milliseconds, 250ms in this example).

The output you expect for the above code is:

0 1 2 3 4

But what you actually get is:

5 5 5 5 5

So, why is that?

When you create the lambda function in the loop, you do not bind the current value of i, so the i used in the lambda function is actually a reference to the loop variable i.

When the lambda functions get called, they will retrieve the current value of the i variable, which is 5 at the end of the loop, thus you get the above output.

How to deal with it?

What you want is force the lambda function to use the value that i had at the time you created it. One way to do it, is to create a function and immediately call it:

function (_i) {
    // whatever
} (i)

By calling the function, you "detach" your variable from its original reference i and give it to a new reference _i. But since you are creating a new reference _i at each loop, the value will be bind correctly.

What you need to do then is create and return another lambda function using your new variable _i by setTimeout:

function (_i) {
    return function () {
        console.log(_i) ;
    } ;
} (i)

The full code:

for (var i = 0 ; i < 5 ; i++) {
    setTimeout (function (_i) {
        return function () {
            console.log(_i) ;
        } ;
    } (i), 250) ;
}

Output:

0 1 2 3 4

Note that in the original code of this answer, I was using the name a to reference both the loop variable and the temporary copy, which was confusing.