How to add multiple records to the end of a table?

Question

JavaScript

Hello. My php fills my table like this:

<tbody>
<? foreach ($order as $o): ?>
  <tr>
    <input type="hidden" value="<?= $o['_id'] ?>" class="sysid">
    <td class="id"><?= $o['number'] ?></td>
    <td>
      <p class="bold"><?= $o['name_person'] ?></p>
      <p class="cont"><?= $o['mailphone_person'] ?></p>
    </td>
    <td><?= $o['adress_person'] ?></td>
    <td>
      <? foreach ($o['products'] as $p): ?>
        <p><?= $p ?></p>
      <? endforeach; ?>
    </td>
    <td><?= $o['price'] ?> ₽</td>
    <td>
      
      <select name="status" class="opti">
      <? foreach ($options as $op): ?>
        <option value="<?= $op ?>" <? if ($op == $o['status']): ?> selected <? endif; ?> ><?= $op ?></option>
      <? endforeach; ?>
      </select>
    </td>
  </tr>
<? endforeach; ?>
</tbody>

Next, I want to load the following fields. How can I implement table generation in js?

I started with this:

let table = document.querySelector('tbody');
let insrow = table.insertRow(-1);
let inscell = insrow.insertCell(-1);

But I feel like I'm doing something wrong. There is no easier option to do it the same way in php? To simply collect one line, and it further generates in the image and likeness further,

I mean like this.

<? foreach ($order as $o): ?>
  <tr>
    <input type="hidden" value="<?= $o['_id'] ?>" class="sysid">
...

So that I just insert variables there

Answer 1

The easiest way would be to create a row template with the cells you need, and then simply add it to the table, filling in the gaps where necessary. I advise you to google Mustache / Handlebars.
Template example:

<tr>
    <input type="hidden" value="{{sysid}}" class="sysid">
    <td>
        <p class="bold">{{personName}}</p>
        <p class="bold">{{personAddress}}</p>
    </td>
</tr>

Then just call Mustache like this:

Mustache.render(templateHtmlString, {
    sysid: 456,
    personName: 'John Doe',
    personAddress: '123 Main St',
});

Another option is to use a React / Vue / Angular frontend framework.
If connecting third-party scripts is not an option, then apart from manually constructing rows and cells, as in your example, I don’t know how (except to write my own Mustache).
Alternatively, you can also implement an API on the PHP side that would return HTML for new lines. Some do (or used to).

Answer 2

Your table Take a template and put it in a variable ' Here's a function to stick it to the bottom of the table When to call this function depends on your needs. For example, when a user clicks a button or when a server responds to an ajax request, you hang up the necessary event listeners there
const table = document.querySelector('tbody');
const row = '<tr><td>--вашконент--</td></tr>
table.insertAdjacentHTML('beforeend', row)