I'm trying to add new row with different object ID. Here is the code:

 function addRows(){
            var table = document.getElementById('emptbl');
            var rowCount = table.rows.length;
            var cellCount = table.rows[0].cells.length;
            var row = table.insertRow(rowCount);

            for(var i =0; i <= cellCount; i++){
                var cell = 'cell'+i;
                cell = row.insertCell(i);
                var copycel = document.getElementById('col'+i).innerHTML;
                cell.innerHTML=copycel;
                var inp1 = cell.getElementsByClassName('select')[0];
                console.log(' test ',JSON.stringify(inp1));
                if(i > 1) {
                $('select[name="product_id0"]').attr('name', 'product_id'+ (i).toString());
                $('select[name="product_id0"]').attr('id', 'product_id'+ (i).toString());
                $('select[name="product_id0"]').attr('class', 'product_id'+ (i).toString());

                }
                if(i == 11){
                    break;
                }
            }
        }
        function deleteRows(){
            var table = document.getElementById('emptbl');
            var rowCount = table.rows.length;
            if(rowCount > '2'){
                var row = table.deleteRow(rowCount-1);
                rowCount--;
            }
            else{
                alert('There should be atleast one row');
            }
        }
        function getComboA(selectObject) {
            console.log('test');
        }

When I press the add row button, it adds a new row but the object ID duplicates the first row object ID. Is there any solutions?