I am trying to create a dynamic table using data from a loop. I have written my code correctly and I get all the needed values from the loop but the table displays incorrectly. The headings are coming one after the other instead of in a single header field. I am trying to achieve something similar to the picture below [![enter image description here](https://i.stack.imgur.com/JSXaN.png)](https://i.stack.imgur.com/JSXaN.png)

```js
const form = document.querySelector('.form');
let primeNumberArray = [];
form.addEventListener('submit', (e)=>{
  e.preventDefault();
  let startValue = parseInt(document.querySelector('.start').value);
  let endValue = parseInt(document.querySelector('.end').value);
  for (let i = startValue; i <= endValue; i++) {
    let flag = 0;

    // looping through 2 to user input number
    for (let j = 2; j < i; j++) {
        if (i % j == 0) {
            flag = 1;
            break;
        }
    }

    // if number greater than 1 and not divisible by other numbers
    if (i > 1 && flag == 0) {
        primeNumberArray.push(i);
    }
}
let uniqueArray = [...new Set(primeNumberArray)]
 buildTable(uniqueArray);
})
//create table dynamically
function buildTable(data){
  let table = document.querySelector('.table');
  let output = '';
  for(let i = 0; i<data.length; i++){
    output += '<tr>'
    for(let j = 0; j<data.length; j++){
    output += '<td>' + data[i] * data[j]  + '</td>'     
    } 
    output+='</tr>'
  }
  table.innerHTML=output
}
```

```html
<form class="form">
  <label for="">Enter the First Number</label>
  <input class="start" type="number"><br>
  <label for="">Enter any Number to get the Multiplication table down to that number</label>
  <input class="end" type="number"><br>
  <button type="submit">Show Multiplication Table</button>
</form>

<table class="table">
</table>
```