I need help in making this as short as possible and it should follow the latest ES6 standards. It it already 100% working. But I need help because i want to follow the best practices in using ES6. The code is a little bit long and messy so maybe you can help me edit my code to make it short and clean. I'm just beginning to learn ES6 so i badly needed your professional advice. Specifically, I want help in implementing on how to output table correctly and declaring variables using ES6.const products = [];const cart = [];const inputs = {  id: document.getElementById(productID),  desc: document.getElementById(product_desc),  qty: document.getElementById(quantity),  price: document.getElementById(price)};const productsTable = document.getElementById(products-table);const cartsTable = document.getElementById(carts-table);function renderProductsTable() {  // delete all entries  [].slice.call(productsTable.children, 1).forEach(entry => productsTable.removeChild(entry));  products.forEach(product => {    const tr = document.createElement('tr');    const id = document.createElement('td');    id.textContent = product.id;    const desc = document.createElement('td');    desc.textContent = product.desc;    const qty = document.createElement('td');    qty.textContent = product.qty;    const price = document.createElement('td');    price.textContent = product.price;    const action = document.createElement('td');    const deleteButton = document.createElement('button');    deleteButton.textContent = 'Delete';    deleteButton.addEventListener('click', removeProduct.bind(null, product.id));    const addToCartButton = document.createElement('button');        action.appendChild(deleteButton);       tr.appendChild(id);    tr.appendChild(desc);    tr.appendChild(qty);    tr.appendChild(price);    tr.appendChild(action);    productsTable.appendChild(tr);  });}function addProduct() {  const product = {    id: inputs.id.value,    desc: inputs.desc.value,    qty: inputs.qty.value,    price: inputs.price.value  };  console.log(products);  products.push(product);  renderProductsTable();  document.getElementById('order').reset();}function removeProduct(product_id) {  const product = products.find(p => p.id === product_id);  const index = products.indexOf(product);  products.splice(index, 1);  renderProductsTable();}<!DOCTYPE html><html><head>  <title>Shopping Cart ES6</title></head><body>  <form name=order id=order>    <table>      <tr>        <td>          <label for=productID>Product ID:</label>        </td>        <td>          <input id=productID name=product type=text size=28 required/>        </td>      </tr>      <tr>          <td>              <label for=product>Product Desc:</label>          </td>          <td>              <input id=product_desc name=product type=text size=28 required/>          </td>      </tr>      <tr>          <td>              <label for=quantity>Quantity:</label>          </td>          <td>              <input id=quantity name=quantity width=196px required/>          </td>      </tr>      <tr>          <td>              <label for=price>Price:</label>          </td>          <td>              <input id=price name=price size=28 required/>          </td>      </tr>  </table>  <input type=reset class=resetbtn value=Reset />  <input type=button id=btnAddProduct onclick=addProduct(); value=Add New Product ></form><table border=1|1 id=products-table>  <tr>    <th>Product ID</th>    <th>Product Description</th>    <th>Quantity</th>    <th>Price</th>    <th>Action</th>  </tr></table><br /></body></html>
Adding and Deleting in ES6 Javascript Alone
javascript;beginner;ecmascript 6;dom