title: Cannot Add Row to HTML Table in jsfiddle using add row button
body: <p>So this is part of a larger project I am attempting to complete in which I enter data values into a table and have a chart process those data values and graph them accordingly. I have code for a table in HTML, with which the user enters in the data, having created a graph based on the data in that table. I can delete the rows of the table just fine, but I cannot add rows to the table using an "Add Row" button. I feel like the problem could lie with the code that allows the row to be added in the first place, although I'm not sure whether it also has to do with the fact that the jsfiddle is private. </p>
  
  <pre><code>&lt;div id="chartdiv" style="width: 100%; height: 450px;"&gt;&lt;/div&gt;
  &lt;div id="data-table"&gt;
  &lt;div class="data-row"&gt;
      &lt;input class="data-cell data-category" value="06/16/2016" type="date" /&gt;
      &lt;input class="data-cell data-value" value="4000" type="number" step="10" /&gt;
      &lt;input class="data-button delete-button" type="button" value="X" /&gt;
  &lt;/div&gt;
  &lt;div class="data-row"&gt;
      &lt;input class="data-cell data-category" value="07/16/2016" type="date" /&gt;
      &lt;input class="data-cell data-value" value="1882" type="number" step="10" /&gt;
      &lt;input class="data-button delete-button" type="button" value="X" /&gt;
  &lt;/div&gt;
  &lt;div class="data-row"&gt;
      &lt;input class="data-cell data-category" value="08/16/2016" type="date" /&gt;
      &lt;input class="data-cell data-value" value="1809" type="number" step="10" /&gt;
      &lt;input class="data-button delete-button" type="button" value="X" /&gt;
  &lt;/div&gt;
  &lt;div class="data-row"&gt;
      &lt;input class="data-cell data-category" value="09/26/2016" type="date" /&gt;
      &lt;input class="data-cell data-value" value="1322" type="number" step="10" /&gt;
      &lt;input class="data-button delete-button" type="button" value="X" /&gt;
  &lt;/div&gt;
  &lt;div class="data-row"&gt;
      &lt;input class="data-cell data-category" value="10/26/2016" type="date" /&gt;
      &lt;input class="data-cell data-value" value="1122" type="number" step="10" /&gt;
      &lt;input class="data-button delete-button" type="button" value="X" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the code for adding and removing the rows:</p>
  
  <pre><code>function generateChartData() {
  var chartData = [];
  jQuery('.data-row').each(function () {
      var date = jQuery(this).find('.data-category').val();
      var value = jQuery(this).find('.data-value').val();
      if (date != '') {
          chartData.push({
              date: date,
              value: value,
  
          });
      }
  });
  return chartData;
  }
  
  function initRowEvents(scope) {
  scope.find('.data-cell')
      .attr('title', 'Click to edit')
      .on('keypress keyup change', function () {
          // re-generate chart data and reload it in chart
          chart.dataProvider = generateChartData();
          chart.validateData();
      }).end().find('.delete-button').click(function () {
          // remove the row
          $(this).parents('.data-row').remove();
  
          // re-generate chart data and reload it in chart
          chart.dataProvider = generateChartData();
          chart.validateData();
      });
  }
  
  jQuery(function () {
  initRowEvents(jQuery(document));
  });
  </code></pre>
  
  <p>This code is based off of the code from <a href="http://jsfiddle.net/amcharts/9uyAf/" rel="nofollow">this jsfiddle</a></p>
  
  <p>Edit: <a href="https://jsfiddle.net/skhaksari/tsox1p8x/" rel="nofollow">Here is my jsfiddle for comparison.</a></p>