Estoy haciendo una tabla donde hay 2 columnas, en el cual con javascript yo agrego columnas y filas, pero el problema es que quiero agregar una fila en la 'Columna 2' a la misma altura que yo agrego una fila en la 'Columna 1', es decir que estén una al lado de la otra, pero cuando añado una fila en la 'Columna 2' se me agrega debajo de la fila que añadi anteriormente a la 'Columna 1' y no quiero que pase eso, no entiendo por que pasa eso.
const agregarBtn_Uno = document.getElementById('agregar');
const agregarBtn_Dos = document.getElementById('agregar_dos')
const inputUno = document.getElementById('input');
const inputDos = document.getElementById('input_dos')
const tabla = document.getElementById('tablaGeneral');
var table = [""];
agregarBtn_Uno.addEventListener('click',()=> {
for(i=0; i<table.length; i++){
tabla.insertRow(-1).innerHTML = '<tr><td>'+inputUno.value+'</td>';
}
})
agregarBtn_Dos.addEventListener('click',()=> {
for(i=0; i<table.length; i++){
tabla.insertRow(-1).innerHTML = '<td><td>'+inputDos.value+'</td></tr>';
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Organizador</title>
</head>
<body>
<p>Formas para estudiar</p>
<table id="tablaGeneral" border="1">
<tr>
<td>Columna 1</td>
<td>Columna 2</td>
</tr>
</table>
<br>
<label for="">Añadir texto a Columna 1</label>
<br>
<input id="input" type="text">
<button id="agregar">Añadir</button>
<br>
<label for="">Añadir texto a Columna 2</label>
<br>
<input id="input_dos" type="text">
<button id="agregar_dos">Añadir</button>
<script src="app.js"></script>
</body>
</html>