JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<table id="records_table"></table>
<div class="title" id="index">

</div>
<table id="selway">
  <tbody>
  <tr> 
                <th>Gage Height</th> 
                <th>Paradise CFS</th> 
                <th>Lowell CFS</th> 
                <th>Difficulty</th> 
            </tr> 
  </tbody>
</table>

CSS

.title 
{
    text-transform: capitalize;
}

table{
	border-collapse: collapse;
}
table td, table th{
	border: 1px solid black;
  text-align: left;
        padding: 0 10px 0 10px;
        margin: 0;
      }
tr:nth-child(even) {
  background: #d3f2eb;
}
table thead{
	background: #ccc;
}

JavaScript

var data = {
  "selway": [{
      "feet": 1,
      "paradise_cfs": "860",
      "lowell_cfs": "1,000",
      "rating": "III-IV"
    },
    {
      "feet": 2,
      "paradise_cfs": "1,140",
      "lowell_cfs": "5,000",
      "rating": "III-IV"
    },
    {
      "feet": 3,
      "paradise_cfs": "1,610",
      "lowell_cfs": "8,750",
      "rating": "III-IV"
    },
    {
      "feet": 4,
      "paradise_cfs": "2,430",
      "lowell_cfs": "12,500",
      "rating": "IV"
    },
    {
      "feet": 5,
      "paradise_cfs": "3,410",
      "lowell_cfs": "16,300",
      "rating": "IV"
    },
    {
      "feet": 6,
      "paradise_cfs": "4,560",
      "lowell_cfs": "20,300",
      "rating": "IV"
    },
    {
      "feet": 7,
      "paradise_cfs": "5,845",
      "lowell_cfs": "24,250",
      "rating": "IV-V"
    },
    {
      "feet": 8,
      "paradise_cfs": "7,685",
      "lowell_cfs": "28,000",
      "rating": "IV-V"
    }
  ]
};
jQuery.each(data, function(index, value) {
  $("#index").append('<p>' + index + '</p>');


  jQuery.each(value, function(index2, value2) {

    $("#selway").append('<tr><td>' + value2.feet + '</td><td>  ' + value2.paradise_cfs + ' </td><td>' + value2.lowell_cfs + ' </td><td>' + value2.rating + '</td></tr>')
    console.log(value2);
  })
  // $("#selway").append('<ul>');

})