title: How to dynamically change HTML table content using JavaScript
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var insert = document.getElementById('insertitem');
  insert.addEventListener('click', function() {
    var table = document.getElementById('insertfirsttable'),
      itemType = prompt("Enter the item name"),
      filling1 = prompt("Enter the filling"),
      filling2 = prompt("Enter the filling"),
      filling3 = prompt("Enter the filling"),
      stock = prompt("Enter the amount in stock"),
      minimum_Stock = prompt("Enter the minimum amount of stock");
  
    for (var r = 0; r &lt; 1; r += 1) {
      var x = document.getElementById('insertfirsttable').insertRow(r);
      for (var c = 0; c &lt; 10; c += 1) {
        var y = x.insertCell(c);
      }
  
      table.rows[r].cells[0].innerHTML = itemType;
      table.rows[r].cells[1].innerHTML = filling1;
      table.rows[r].cells[2].innerHTML = filling2;
      table.rows[r].cells[3].innerHTML = filling3;
      table.rows[r].cells[4].innerHTML = stock;
      table.rows[r].cells[5].innerHTML = minimum_Stock;
      table.rows[r].cells[9].innerHTML = '&lt;button id="sellbtn" style="width:102px; height: 25px; font-size:18px; cursor:pointer"&gt;Sell&lt;/button&gt;';
      table.rows[r].cells[9].style.width = "100px";
      var sellBtn = document.getElementById("sellbtn");
    }
    //problem is here i guess
    sellBtn.addEventListener("click", function() {
      var sell = prompt("Enter the stock amount you're selling"),
        total = stock - sell;
      for (var t = 0; t &lt; table; t += 1) {
        for (var c = 0; c &lt; table.cells.length; c += 1) {}
        table.rows[t].cells[4].innerHTML = total;
  
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    background-color: #E6E6E6;
    font-size: 20px;
  }
  table {
    border-spacing: 1px;
    width: 100%;
  }
  th {
    padding: 1px;
  }
  #firsttablediv {
    width: 100%;
  }
  #firsttable {
    color: white;
    background-color: green;
  }
  #insertitem {
    width: 100%;
    padding: 2px;
    font-size: 20px;
    cursor: pointer;
  }
  #insertfirsttable &gt; tr {
    background-color: #31B404;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
    &lt;div id="firsttablediv"&gt;
      &lt;table id="firsttable" border="1"&gt;
        &lt;thead&gt;
          &lt;th&gt;Item&lt;/th&gt;
          &lt;th colspan="3"&gt;Filling&lt;/th&gt;
          &lt;th&gt;Storage&lt;/th&gt;
          &lt;th&gt;Minimum Stock&lt;/th&gt;
          &lt;th&gt;Last Inventory&lt;/th&gt;
          &lt;th&gt;Sell&lt;/th&gt;
          &lt;th&gt;Last Month Inventory&lt;/th&gt;
          &lt;th colspan="2"&gt;
            &lt;button id="insertitem"&gt;New Item&lt;/button&gt;
          &lt;/th&gt;
        &lt;/thead&gt;
        &lt;tbody id="insertfirsttable"&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Guys I'm writing an application for my father's shop. He wants an application to manage his items and such, anyways, after you click on the insert item button and input the details. The item is then put in a row with each detail in it's respective cell, also a button appears within that row called 'Sell' in which if an item has been sold you press on it and it asks you how many of that item you have sold? you type the number and then enter and it should subtract the stock number from that number and put in the new number in the stock cell of that row but i can't seem to know how to do it.</p>