JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="fixtures">
  <thead>
    <tr>
      <th>Home</th>
      <th>Away</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th, td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}

JavaScript

var jsonDataUrl = 'http://bushell.net/football/site/includes/functions.php';

$(function() {
data = [{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},]
addRows1($('#fixtures'), data, ['homeTeamName','awayTeamName']);

function addRows1(table, data, fields) {
	var tbody = table.find('tbody');

  $.each(data, function(i, item) {
    console.log(item);
    tbody.append(addRow1(item, fields));
  });
}

function addRow1(item, fields) {
  var row = '<tr>';
  $.each(fields, function(i, field) {
  
    row +='<td>'+item[field]+'</td>';
  });
  row += '</tr>';
  return row;
}
});