title: How do I change an HTML table cell value by a dynamically added button in each row
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 type"),
      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 stock minimum");
  
    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].style.width = "100px";
      var CreateBtn = document.createElement("button");
      CreateBtn.innerHTML = "sell";
      CreateBtn.id = "sellbtn";
      CreateBtn.style.width = "100px";
      CreateBtn.style.height = "25px";
      CreateBtn.style.cursor = "pointer";
      CreateBtn.style.fontSize = "18px";
      table.rows[r].cells[9].appendChild(CreateBtn);
      var sellBtn = document.getElementById("sellbtn");
      CreateBtn.onclick = function Sell() {
        var sell = prompt("Enter the amount of stock you're selling");
        for (var a = 0; a &lt; table.length; a += 1) {
          for (var b = 0; b &lt; table.cells.length; b += 1) {
  
          }
        }
        table.rows[a].cells[4].innerHTML = parseInt(table.rows[a].cells[4].innerHTML) - sell;
      }
    }
  
  });</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 Type&lt;/th&gt;
          &lt;th colspan="3"&gt;Filling&lt;/th&gt;
          &lt;th&gt;Stock&lt;/th&gt;
          &lt;th&gt;Stock Minimum&lt;/th&gt;
          &lt;th&gt;Closing 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;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I press on the sell button (which is dynamically added by JavaScript to each row when an item is added) </p>
  
  <p>I want it to ask me about the amount I want to sell of that item and then when I enter the amount it should subtract the stock amount from the amount I want to sell (the one entered previously) and then update the stock amount in the cell of that item's row to the new number. </p>
  
  <p>It's pretty simple but I just can't figure it out.</p>