Как отобразить две разные таблицы CSV в HTML на одной странице, используя папапразу

Question

У меня есть следующая рабочая таблица csv в html с использованием papaprase.

Мое требование - как отобразить две разные таблицы csv в html на одной странице, используя одну и ту же

У меня есть следующеерабочая таблица csv в html с использованием папапразы.

Мое требование - как отобразить две разные таблицы csv в html на одной странице, используя один и тот же

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script src ="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>

<script>
function arrayToTable(tableData) {
  var table = $('<table></table>');

  $(tableData).each(function(i, rowData) {
    var row = $('<tr></tr>');

    $(rowData).each(function(j, cellData) {
      row.append($('<td>' + cellData + '</td>'));
      //row.append($('<td>' + cellData + '</td>'));
    });

    table.append(row);
  });
  return table;
}



$.ajax({
  type: "GET",
  url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/csv_data.csv",
  crossDomain: true,
  contentType: 'html',
  success: function(data) {
    $('[id="a"]').append(arrayToTable(Papa.parse(data).data));
    var y = $('[id="a"] tr td');
    $(y).each(function(j){
       $(this).attr('data-column',$('[id="a"] tr:first-child td:eq(' + (j % 3) + ')').text());
    });
  }
});
</script>

.here td {
  padding: 10px 15px;
}

.here table {
  border-collapse: collapse;
  width: 100%;
}

.here tr:first-child td {
  padding: 15px;
  font-size: 30px;
  font-family: 'allura';
  font-weight: bold;
}


/* TEMPLATE 1 COLOR */

.template1 tr:first-child td {
  background-color: #F0F0F0 !important;
}

.template1 td {
  border-color: #CCCCCC;
  border-style: solid;
}

.template1.hor tr:nth-child(odd),
.template1.ver td:nth-child(even) {
  background-color: #F6F6F6;
}


/* TEMPLATE 2 COLOR */

.template2 tr:first-child td {
  background-color: #F38630 !important;
}

.template2 td {
  border-color: #AAAAAA;
  border-style: solid;
}

.template2.hor tr:nth-child(odd),
.template2.ver td:nth-child(even) {
  background-color: #FCFBE3;
}


/* TEMPLATE 3 COLOR */

.template3 tr:first-child td {
  background-color: #26ADE4 !important;
}

.template3 td {
  border-color: #999999;
  border-style: solid;
}

.template3.hor tr:nth-child(odd),
.template3.ver td:nth-child(even) {
  background-color: #D2E4FC;
}


/* TEMPLATE 4 COLOR */

.template4 tr:first-child td {
  background-color: #9DE0AD !important;
}

.template4 td {
  border-color: #BBBBBB;
  border-style: solid;
}

.template4.hor tr:nth-child(odd),
.template4.ver td:nth-child(even) {
  background-color: #C2FFD6;
}


/*BORDER*/

.allBorder td {
  border-width: 1px;
}

.vertiBorder td {
  border-left-width: 1px;
}

.vertiBorder td:first-child {
  border-left-width: 0 !important;
}

.horiBorder td {
  border-bottom-width: 1px;
}

@media only screen and (max-width: 500px) {
  .here table {
    width: 100%;
  }
  /* Force table to not be like tables anymore */
  .here table,
  .here thead,
  .here tbody,
  .here th,
  .here td,
  .here tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  .here tr:first-child {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .here tr {
    border: 1px solid #ccc;
  }
  .here td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 45%;
  }
  .here td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    /* Label the data */
    content: attr(data-column);
    color: #000;
    font-weight: bold;
    z-index: 1111111;
  }
}

<div id="a" class="here allBorder hor template3 headColor"></div>