JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <title>
    JS Form
  </title>
</head>

<body>
  <div id="main">
    <p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
  </div>
  <div id="panel">

  </div>
  <div id="listing">

  </div>
  <button id="showbutton" hidden="true">< Back</button>
  <script src="script.js"></script>
</body>

</html>

CSS

#chkname,
#chkdesc,
#chkprice,
#chkqty {
  color: red;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 70%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

JavaScript

class Storedata {
  constructor(name, desc, price, qty) {
    this.name = name;
    this.desc = desc;
    this.price = price;
    this.qty = qty;
  }
}

var arr = [];
var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;

function addData() {
  var proname = document.getElementById("inpname");
  var prodesc = document.getElementById("inpdesc");
  var propric = document.getElementById("inpprice");
  var proqty = document.getElementById("inpqty");
  arr.push(new Storedata(proname.value, prodesc.value, propric.value, proqty.value));
}

function showlist() {
  var data = document.createElement('table');
  data.setAttribute("id", "data");
  data.innerHTML += "<tr><th>Product Name</th><th>Description</th><th>Price</th><th>Quantity</th><th></th></tr>";
  for (let i = 0; i < arr.length; i++) {
  var text = arr[i].desc;
  text = text.replace(/\n/g, '<br />');
    data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + text + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
  };
  document.getElementById('listing').appendChild(data);
  document.getElementById('showbutton').removeAttribute("hidden", false);
}

function removelist() {
  var data = document.getElementById("data");
  data.parentNode.removeChild(data);
}

function addformtopage() {
  var form = document.createElement('div');
  form.setAttribute("id", "remform");
  form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" hidden=\"true\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" hidden=\"true\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" hidden=\"true\">Enter a Product...