table won’t allow me to append more than 2 cells

    function createTable(data_array){
        const billing_table_body = document.querySelector('#billing_progile_Table > tbody')

        

        //we loop through object array and have access to each individual JSON
        for(var i = 0; i<objarray.length;i++){
                console.log("data : ",objarray[i].profileName)
                
                //create row 
                const tr = document.createElement('tr'); //creating the row
                console.log('creating new row');

            
                
                //append individual tds
                const td = document.createElement('td')
                td.textContent = objarray[i].profileName//appends data from the json cell
                td.className = 'text_td';
                tr.appendChild(td);
               
                const td_two = document.createElement('td')
                td_two.textContent = objarray[i].cardemail
                td.className = 'text_td';
                tr.appendChild(td_two);

                const td_three = document.createElement('td')
                td_two.textContent = objarray[i].cardownername
                td.className = 'text_td';
                tr.appendChild(td_three);
                
                const td_four = document.createElement('td')
                td_two.textContent = objarray[i].cardnumber
                td.className = 'text_td';
                tr.appendChild(td_four);

               
                
                
                    
                //append whole row to tr
            billing_table_body.appendChild(tr); 
            }
                
        }

im trying to append the cells into the table with their data but the table won’t allow me to do it and I need to write it like this because im trying to access specific objects of the json array. any help im new to JAVASCRIPT AND JSON

Answer

Please stop adding row and cells with createElement() method…!

const billing_table_body = document.querySelector('#billing_progile_Table > tbody')

function createRows(data_array) 
  {
  data_array.forEach(el => 
    {
    let newRow = billing_table_body.insertRow()
    newRow.insertCell().textContent = el.profileName
    newRow.insertCell().textContent = el.cardemail
    newRow.insertCell().textContent = el.cardownername
    newRow.insertCell().textContent = el.cardnumber

    newRow.querySelectorAll('td').forEach(td=>td.className='text_td')
    })
  }