Estoy intentando hacer un array de 10 nombres, en el cual los coloco y con el boton "Mostrar Tabla" me muestra los 10 nombres, y el botón "Generar Equipos" me los genera al azar, diviendolos en equipos cada 5 personas, pero el problema es que en el el "Team 1" me lo genera bien indicando las 5 personas, pero cuando quiero generar el "Team 2" me genera una sola fila con los 5 elementos uno al lado del otro, he estado probando varias cosas sacando el "" y el "" pero no llego a la solucion, no entiendo como deberia ser la forma correcta para que me los divida a los 5 elementos en el Team 1, y los otros 5 elementos en el Team 2 con los elementos bien posicionados.
var tabla = [
{nombre: "Juan"},
{nombre: "Pedro"},
{nombre: "Raul"},
{nombre: "Simon"},
{nombre: "Franco"},
{nombre: "German"},
{nombre: "Lautaro"},
{nombre: "Emi"},
{nombre: "Maxi"},
{nombre: "Lucas"}
];
var j,x,i;
var pval;
window.onload = cargarEventos;
function cargarEventos(){
document.getElementById("mostrar-tabla").addEventListener("click", mostrarTabla, false);
document.getElementById("cambio-nombres").addEventListener("click",cambiarNombres,false);
}
function mostrarTabla(){
var cuerpoTabla = document.getElementById("equipos-tabla");
var tablaLlena = "";
for (var i =0; i< tabla.length; i++){
tablaLlena += "<tr><td>"+ tabla[i].nombre;
}
cuerpoTabla.innerHTML = tablaLlena;
}
function cambiarNombres (tablaLlena) {
for (i= tabla.length -1; i>0; i--) {
j = Math.floor(Math.random()*(i+1));
x=tabla[i].nombre;
tabla[i].nombre=tabla[j].nombre;
tabla[j].nombre=x;
}
pval ="<tr>";
for (i=0; i<5; i++) {
pval += "<td>"+tabla[i].nombre+"</td></tr>";
}
for (i=5; i<10; i++) {
pval += "<td>"+tabla[i].nombre+"</td>";
}
document.getElementById('pText').innerHTML=pval;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<div id="tabla-clasificacion"></div>
<table class="table">
<thead>
<tr>
<th>Equipos</th>
<th>Puntos</th>
</tr>
<tbody id="equipos-tabla">
</tbody>
</thead>
</table>
<button id="mostrar-tabla">Mostrar Tabla</button>
<button id="cambio-nombres">Generar Equipos</button>
<table class="table">
<thead>
<tr>
<th>Team 1</th>
<th>Team 2</th>
</tr>
<tbody id="pText">
</tbody>
</thead>
</table>
<div></div>
</div>
</div>
</div>
<script src="js/cargarTabla.js"></script>
</body>