Q:

While loop inside a for loop concatening

when I execute this code it spits out a new row inside the table but it includes the previous iteration along with the newest one.   I want all "As" to be in the first  row in the main table.   And then I want all "Bs" to be in the second , etc, etc.   Then for A0, A1, and A2, I want them to be in their own table within the first row, same for B0, B1 in the second row, etc, etc

<head>
  <style>
  table,
    th,
    td {
      border: 1px solid black;
    }
  }
  </style>
</head>

<table id="table">
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="0"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="1"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="2"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="3"></table>
    </td>
  </tr>


</table>

<script>
  var array = [
    ["A0---", "A1----", "A2---"],
    ["B0----", "B1---"],
    ["C0---", "C1---"],
    ["D0---", "D1---"]
  ];

  var text = ""
  console.log(array.length);
  for (var i = 0; i < array.length; i++) {

    var j = 0;
    console.log(array[i].length);
    while (j < array[i].length) {
      text += "<tr><td>" + array[i][j] + "</td></tr>";
      j++;
    }

    document.getElementById(i).innerHTML = text;
  }
</script>

A:

Initialize the text variable to the empty string inside the first loop instead:
for (var i = 0; i < array.length; i++) {
  let text = '';

But note that you can make your code more functional, shorter, and easier to read by using array methods like .map and forEach rather than using for, while, and manual iteration (better not to have to keep track of indicies):
array.forEach((subArr, i) => {
  const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
  document.getElementById(i).innerHTML = text.join('');
});

var array = [
  ["A0---", "A1----", "A2---"],
  ["B0----", "B1---"],
  ["C0---", "C1---"],
  ["D0---", "D1---"]
];

array.forEach((subArr, i) => {
  const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
  document.getElementById(i).innerHTML = text.join('');
});
table,
th,
td {
  border: 1px solid black;
}
<table id="table">
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="0"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="1"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="2"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="3"></table>
    </td>
  </tr>


</table>

