title: I cant insert cell in my table using javascript
body: <p>Hi i am creating this app and then i use javascript so that whatever i input in the boxes i could see it in my DETAILS HISTORY. and i did insert cells and stuff but when i run it i could see my table data getting inserted but only a few seconds then it will disappear i dont know why i hope you cn help me &lt;3. here below is my codes</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let enter = document.getElementById("btn");
  enter.addEventListener("click", displayFunction);
  let row = 1;
  function displayFunction() {
    let detail = document.getElementById("detail-input").value;
    let amount = document.getElementById("amount-input").value;
  
    if (!detail || !amount) {
      alert("Please Fill in the Boxes");
      return;
    }
  
    let table = document.getElementById("myTable");
    let newRow = table.insertRow(row);
  
    let cell1 = newRow.insertCell(0);
    let cell2 = newRow.insertCell(1);
  
    cell1.innerHTML = detail;
    cell2.innerHTML = amount;
    row++;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&amp;display=swap");
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins";
  }
  
  .container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.685);
  }
  
  .form-container {
    min-width: 500px;
    min-height: 600px;
    background: linear-gradient(
      55deg,
      rgb(71, 126, 247),
      rgba(53, 52, 52, 0.295)
    );
    padding: 20px 30px;
    border: 5px solid rgb(37, 37, 49);
    border-radius: 10px;
    text-align: center;
    color: rgb(58, 57, 57);
    box-shadow: 2px 2px 20px #333;
    position: relative;
  }
  
  .form-container h1 {
    margin-bottom: 2rem;
  }
  
  .form-container h3 {
    margin-bottom: 2rem;
    position: relative;
  }
  
  .form-container h3::before {
    content: "";
    width: 4rem;
    height: 2px;
    background-color: rgb(41, 32, 32);
    position: absolute;
    top: 50%;
    left: 20%;
  }
  
  .form-container h3::after {
    content: "";
    width: 4rem;
    height: 2px;
    background-color: rgb(41, 32, 32);
    position: absolute;
    top: 50%;
    right: 20%;
  }
  
  form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  
  form input {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: none;
    outline: none;
    border: none;
    border-bottom: 2px solid rgb(41, 32, 32);
  }
  
  .detail {
    margin-top: 20px;
  }
  
  .amount {
    margin-top: 50px;
  }
  
  #btn {
    text-decoration: none;
    color: #000;
    border: 1px solid;
    border-radius: 20px;
    background: #fff;
    padding: 10px 20px;
    position: absolute;
    bottom: 28%;
    cursor: pointer;
    transition: 500ms ease-out;
  }
  
  #btn:hover {
    background: #000;
    color: #fff;
  }
  
  .history {
    margin-top: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .col-2 {
    border: 1px solid;
    padding: 5px 10px;
    background: #fff;
  }
  
  .label-1 {
    color: green;
  }
  
  .label-2 {
    color: red;
  }
  
  .label-3 {
    color: rgb(24, 166, 223);
  }
  
  .details-container {
    margin-left: 10px;
    width: 500px;
    height: 600px;
    border: 5px solid #333;
    border-radius: 10px;
    text-align: center;
    background: linear-gradient(
      55deg,
      rgb(71, 126, 247),
      rgba(53, 52, 52, 0.295)
    );
  }
  
  .details-container h1 {
    margin-top: 20px;
  }
  #myTable {
    border-collapse: collapse;
    background: #fff;
    border: 1px solid;
    width: 100%;
  }
  
  #myTable,
  td,
  th {
    border: 2px solid;
    padding: 10px 20px;
  }
  
  td {
    color: #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Expenses Tracker App&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="form-container"&gt;
          &lt;h1&gt;EXPENSES TRACKER APP&lt;/h1&gt;
          &lt;h3&gt;New Entry&lt;/h3&gt;
          &lt;form id="form"&gt;
            &lt;div class="detail"&gt;
              &lt;div class="col-1"&gt;
                &lt;label&gt;Details&lt;/label&gt;
                &lt;input type="text" id="detail-input" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="amount"&gt;
              &lt;div class="col-1"&gt;
                &lt;label&gt;Amount&lt;/label&gt;
                &lt;input type="number" id="amount-input" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;button id="btn"&gt;Enter&lt;/button&gt;
          &lt;/form&gt;
  
          &lt;div class="history"&gt;
            &lt;div class="col-2 col-ie"&gt;
              &lt;p class="label-1"&gt;INFLOW&lt;/p&gt;
              &lt;p id="inflow"&gt;$0.00&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-2"&gt;
              &lt;p class="label-2"&gt;OUTFLOW&lt;/p&gt;
              &lt;p id="outflow"&gt;$0.00&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-2"&gt;
              &lt;p class="label-3"&gt;BALANCE&lt;/p&gt;
              &lt;p id="balance"&gt;$0.00&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="details-container"&gt;
          &lt;h1&gt;DETAILS HISTORY&lt;/h1&gt;
          &lt;table id="myTable"&gt;
            &lt;tr&gt;
              &lt;th&gt;Details&lt;/th&gt;
              &lt;th&gt;Amount&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>