You could iterate the array and build a new row if the remainder with 5 is zero.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    tr;

array.forEach((v, i) => {
    var td = document.createElement('td');
    
    if (!(i % 5)) {
        tr = document.createElement('tr');
        document.getElementById('table0').appendChild(tr);
    }
    td.appendChild(document.createTextNode(v));
    tr.appendChild(td);
});

<table id="table0"></table>

var arr = ["1","2","-3","4","-5","-6","7"];

var table = document.createElement("table"),          // create the table element
    tbody = document.createElement("tbody");          // create the table body element
    
table.appendChild(tbody);                             // add the table body to table

// ### POSITIVE ROW ######################

var tr = document.createElement("tr");                // create the table row element
arr.forEach(function(e) {                             // for each element e in arr
  var td = document.createElement("td");              // create a table cell element
  if(e >= 0) {                                        // if e is positive
    td.textContent = e;                               // then change the text content of this cell to e
    td.style.background = "#ccc";                     // and change the background as well
  }
  tr.appendChild(td);                                 // add the cell to the row (if the number is negative the cell will be empty and without background)
});
tbody.appendChild(tr);                                // add the row to table


//### NEGATIVE ROW ######################

tr = document.createElement("tr");                    // same but for negative numbers ...
arr.forEach(function(e) {
  var td = document.createElement("td");
  if(e < 0) {
    td.textContent = e;
    td.style.background = "#ccc";
  }
  tr.appendChild(td);
});
tbody.appendChild(tr);

document.body.appendChild(table);

You can group some of the code in a function and reuse it:

// elt is shortcut for document.createElement
function elt(tag) {
  return document.createElement(tag);
}

// take an array and a condition function conditionFN and return a row of all the element that passed the condition function with a background of #ccc
function makeRow(arr, conditionFN) {
  var tr = elt("tr");
  arr.forEach(function(e) {
    var td = elt("td");
    if (conditionFN(e)) {
      td.textContent = e;
      td.style.background = "#ccc";
    }
    tr.appendChild(td);
  });
  
  return tr;
}

// take an array and return the equivalent table element
function makeTable(arr) {
  var table = elt("table"),
      tbody = elt("tbody");

  table.appendChild(tbody);
  
  tbody.appendChild(makeRow(arr, function(e) { return e >= 0; })); // the condition function only allows positive numbers => positive row
  tbody.appendChild(makeRow(arr, function(e) { return e < 0; }));  // the condition function only allows negative numbers => negative row
  
  return table;
}



document.body.appendChild(makeTable([1, 2, -3, 4, -5, -6, -7, 8, 9, 10]));

You must create td and text nodes within loop. Your code creates only 2 td, so only 2 are visible. Example:

var table = document.createElement('table');
for (var i = 1; i < 4; i++) {
  var tr = document.createElement('tr');

  var td1 = document.createElement('td');
  var td2 = document.createElement('td');

  var text1 = document.createTextNode('Text1');
  var text2 = document.createTextNode('Text2');

  td1.appendChild(text1);
  td2.appendChild(text2);
  tr.appendChild(td1);
  tr.appendChild(td2);

  table.appendChild(tr);
}
document.body.appendChild(table);

Here's a function that will use the dom instead of string concatenation.

function createTable(tableData) {
  var table = document.createElement('table');
  var tableBody = document.createElement('tbody');

  tableData.forEach(function(rowData) {
    var row = document.createElement('tr');

    rowData.forEach(function(cellData) {
      var cell = document.createElement('td');
      cell.appendChild(document.createTextNode(cellData));
      row.appendChild(cell);
    });

    tableBody.appendChild(row);
  });

  table.appendChild(tableBody);
  document.body.appendChild(table);
}

createTable([["row 1, cell 1", "row 1, cell 2"], ["row 2, cell 1", "row 2, cell 2"]]);

Change:

var tr = document.createElement('TR'); // this should be inside the first loop
tableBody.appendChild(tr); // this should be just before the first loop is over

for (i=0; i<stock.length; i++) {
    for (j=0; j<stock[i].length; j++)    {
      var td = document.createElement('TD')
      td.appendChild(document.createTextNode(stock[i][j]));
      td.appendChild(td) // this should be tr.appendChild(td)
    }
}

to this:

for (i = 0; i < stock.length; i++) {
    var tr = document.createElement('TR');
    for (j = 0; j < stock[i].length; j++) {
        var td = document.createElement('TD')
        td.appendChild(document.createTextNode(stock[i][j]));
        tr.appendChild(td)
    }
    tableBody.appendChild(tr);
}

Fiddle

1) This my answer how do this on VueJS and jQuery

2) Vanilla js - CODEPEN - DEMO

// Get DOM elements
const $el = [
    '#tmpl',
    '#user-count',
    '#people-count',
    '#form-items',
    '#btn-add',
    '#form',
].reduce((res, item) => {
    const method = item.startsWith('#')
        ? 'querySelector'
        : 'querySelectorAll'
    const key = item
        .replace(/\W/ig, ' ').trim()
        .replace(/\s+\w/g, v => v.trim().toUpperCase())
    res[key] = documentmethod
    return res
}, {})

// Variable for dynamic template
const tmpl = $el.tmpl.innerHTML.trim()

// Click on Add new button
$el.btnAdd.addEventListener('click', () => {
    const peopleCount = +$el.peopleCount.value
    const html = Array(peopleCount)
            .fill(tmpl)
            .join('')
    $el.formItems.insertAdjacentHTML('beforeend', html)
})

// Submit form
$el.form.addEventListener('submit', e => {
    e.preventDefault()
    alert('Submit form by ajax or remove this method for default behavior')
})

// Add form click (it's need for dynamic handler on child elements)
$el.form.addEventListener('click', e => {
    // Delete behaviors
    if (e.target.classList.contains('btn-del') && confirm('Are you sure?')) {
        e.target.closest('.row').remove()
    }
})

<div id="app">
    <div>
        <div>
            <button id="btn-add">Add new user</button>
            <label>Number of People:</label>
            <input type="number" id="people-count" value="1" min="1">
        </div>
        <form id="form">
            <div id="form-items" data-empty="Users list is empty"></div>
            <button>Send</button>
        </form>
    </div>
</div>

<script type="text/x-template" id="tmpl">
    <div class="row">
        <label>
            Name:
            <input class="people" name="name[]">
        </label>
        <label>
            Surname:
            <input class="people" name="surname[]">
        </label>
        <label>
            Email:
            <input type="email" class="people" name="email[]">
        </label>
        <button class="btn-del">Delete</button>
    </div>
</script>

<style>
    .people {
        width: 80px;
    }
    #form-items:empty + button {
        display: none;
    }
    #form-items:empty:before {
        content: attr(data-empty);
        display: block;
    }
</style>