build unique table with JQuery AJAX

For the purpose of having multiple tables with unique table ids, how would I implement this? I currently have a script that builds a table with the respective prebuilt table headers. But when I try to do this with another prebuilt table it will automatically build it with the same data from the JSON file.

JSON1:

[{"GLComment":"comment from table 1","EnComment":""},  {"GLComment":"","EnComment":""}]  

JSON2:

[{"GLComment":"comment from table 2","EnComment":""},   {"GLComment":"","EnComment":""}]  

<table class="table 1">    <thead>      <th id = "white">GL Comment</th>      <th id = "white">En Comment</th>    </thead>  </table>    <script>  $(document).ready(function() {    infoTableJson = {}    buildInfoTable();  });    function buildInfoTable(){    $.ajax({ //allows to updates without refreshing      url: "comment1.json",      success: function(data){          data = JSON.parse(data)        var tblSomething = '<tbody>';          $.each(data, function(idx, obj){            //Outer .each loop is for traversing the JSON rows          tblSomething += '<tr>';            //Inner .each loop is for traversing JSON columns          $.each(obj, function(key, value){            tblSomething += '<td data-key="' + key + '">' + value + '</td>';          });          //tblSomething += '<td><button class="editrow"></button></td>'          tblSomething += '</tr>';        });        tblSomething += '</tbody>';        $('.table').append(tblSomething)  </script>  

https://stackoverflow.com/questions/65854401/build-unique-table-with-jquery-ajax January 23, 2021 at 08:08AM