Java Script Can't retrieve data from dynamically created table

Question

Here I have some java script in which when there is a click event on the row, a row within a different table will populate with the clicked rows data. Now that works perfectly fine. The java script adds row data information to json dictionary in which the row is inserted from json data.

Now what I would like to do on the dynamically created table that's on the right of the image, I would like to add event listeners to the button, or at least to the row so I can delete the items from the json dictionary in return only displaying the items that are in the json dictionary.

I do have a few questions considering I'm noobie, but first here is my code.

pricecart.js

var tablerows = document.getElementById('tabletest').rows.length;
var table = document.getElementById('tabletest');
var cart = document.getElementById('cart');
var jsonTest = '[]';
var jsonObj = JSON.parse(jsonTest);

for(x = 0; x < tablerows; x++){
  table.rows[x].addEventListener('click', addCartItem);
}

function addCartItem(ev){
  index = this.rowIndex;
  equipmentCell = table.rows[index].cells[0];
  priceCell = table.rows[index].cells[1];
  equipmentName = equipmentCell.innerHTML;
  equipmentPrice = priceCell.innerHTML;
  var row = cart.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  jsonObj[jsonObj.length] = {[equipmentName]:equipmentPrice};

  for(zz=0; zz < jsonObj.length; zz++){
    for(key in jsonObj[zz]){
      cell1.innerHTML = key;
    }
    cell2.innerHTML = "<strong>"+jsonObj[zz][equipmentName]+"</strong>";
    cell3.innerHTML = "<button class='btn btn-danger'>Delete</button>";
  }
}

pricing.html

{% extends 'base.html' %}
{% block content %}
  <h1>Pricing</h1>
  <div class="row">
    <div class="container col-sm-6">
      <div class="container border">
        <table id='tabletest'>
          <thead>
            <th><h5>Equipment</h5></th>
            <th "><h5>Price</h5></th>
          </thead>
            {% for quip in pricing %}
              <tr style="height:25px;" class="border">
                <td id='pricewidth'>{{quip}}</td>
                <td id='pricewidth' style='text-align:center;'>${{pricing[quip]}}</td>
                <td ><button type="button" name="button" class="btn btn-primary">Add</button></td>
              </tr>
            {% endfor %}
        </table>
      </div>
    </div>
    <div class="container col-sm-6">
      <table id='cart'>
      </table>
      <h1>Subtotal: </h1>
      <button type="submit" name="button" class='btn btn-warning'>Order</button>
    </div>
  </div>
{% endblock content %}

Now this is a Flask application fyi:

1st: How do I add events to 2nd table on the right. When I try the same process of adding events through the first table on the left it does nothing upon clicking.

2nd: Should I store json in it's own file within flask application(How do I do this and how would I go about accessing this?)

3rd: If one user is writing to json dict, will other users see that same information when they are adding items to their cart. Very confused on how that part works.

Feel free to point me to any links. I'm really trying to get on board with best web development practices and have that ingrained while practicing and working on my projects. So please tell me if there are any other ways I can or should be writing my code. Thanks y'all.

Answer 1

1st: How do I add events to 2nd table on the right. When I try the same process of adding events through the first table on the left it does nothing upon clicking.

We need more information. You are probably binding your listener too early, such that the rows doesn't yet exists. When you dynamically create your rows, you should do something like:

var row = cart.insertRow(0);
row.addEventListener('click', function(){
   ...
});

2nd: Should I store json in it's own file within flask application(How do I do this and how would I go about accessing this?)

You can't directly write to a json file using javascript. You will have to create an API using Flask to be able to modify your stored data. Look at this tutorial if you have never created REST API : https://blog.miguelgrinberg.com/post/designing-a-restful-api-with-python-and-flask.

Anyway, to send data to this API, you will have to send http requests from javascript (XHR). If you plan to create a huge website, I strongly recommand to use a js framework (like Vuejs or AngularJS) to structure your client side app.

3rd: If one user is writing to json dict, will other users see that same information when they are adding items to their cart. Very confused on how that part works.

I feel like writing data to a json file is not a good idea for this use case. You should probably use a database using a python ORM like SQLAlchemy. It will manage for you concurrent access to data. My favorite way to use it along with Flask is using the connector marshmallow-sqlalchemy. Or you could simply store you cart in browser's cookies (in browser)