[FIXED] I want to add rows in all table with the name

Issue

I want to add some rows in the tables but they have the same name. I've got the individual row length of the 3 tables but when i insert the row, it only inserted in the first table. Here is my code using javascript:

$('table').each(function() {
    var sam = $('tbody tr', this).length;
        var table = document.getElementById("tb-calendar1");

        // alert(sam);
        if(sam < 8){
            var row = table.insertRow(7);

            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            var cell5 = row.insertCell(4);
            var cell6 = row.insertCell(5);
            var cell7 = row.insertCell(6);

            cell1.innerHTML = " ";
            cell2.innerHTML = " ";
            cell3.innerHTML = " ";
            cell4.innerHTML = " ";
            cell5.innerHTML = " ";
            cell6.innerHTML = " ";
            cell7.innerHTML = " ";
                    }
    });

Here's the picture

Solution

Looks like you have table elements with duplicate email IDs. IDs must be unique. Due to duplicate ids, your selector for table(document.getElementById) is selecting first table only.

You can rather use context this to target current table element in .each().

var table = this;

Answered By - Milind Anantwar