Your first issue is your assigning data field twice. So when you set innerHTML of datafield your actually calling that on the variable that's defined inside the event listener which isn't the variable that contains the DOM element.

Try:

const inputs = [...document.querySelectorAll('input')];
const button = document.querySelector('button');
const datafield = document.querySelector('.datafield');

button.addEventListener('click', (e) => {
  e.preventDefault();
  let x = [];
  inputs.forEach((input, index) => {
    x.push(input.value);
  });

  datafield.innerHTML += x.map((item) => `<td>${item}</td>`).join('');
});

I found the way. Check the updated code below.

HTML

<form>
      <input name="sr.no" value="1" type="number" placeholder="sr.no" />
      <input name="date" value="date" type="date" placeholder="date" />
      <input name="item" value="item" type="text" placeholder="item name" />
      <input name="qty" value="qty" type="text" placeholder="quantity" />
      <input name="amt" value="amt" type="text" placeholder="price" />
      <button type="submit">submit</button>
    </form>

    <div class="container">
      <table>
        <tr>
          <th width="10%">Sr.No.</th>
          <th width="10%">Date</th>
          <th width="60%">Name</th>
          <th width="10%">Quantity</th>
          <th width="10%">Price</th>
        </tr>
        <tr class="datafield"></tr>
        <tr>
          <td colspan="4" align="right"><b>TOTAL</b></td>
          <td>0.00</td>
        </tr>
      </table>
    </div>

SCRIPT

const button = document.querySelector("button");
  const inputs = [...document.querySelectorAll("input")];
  const datafield = document.querySelector(".datafield");

  button.addEventListener("click", (e) => {
    e.preventDefault();
    const tr = document.createElement("tr");
    inputs.forEach((input, index) => {
      const td = document.createElement("td");
      tr.appendChild(td);
      const values = document.createTextNode(input.value);
      td.appendChild(values);
      console.log(td);
      datafield.insertAdjacentElement("beforebegin", tr);
      input.value = "";
    });
  });