JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="createTable()">Load Table</button>
<button onclick="saveData()">Save Table data</button>
<table id="datatable" align="center">
  <tr>
    <th>Select</th>
    <th>Name</th>
    <th>DOB</th>
  </tr>
  </tr
</table>

<br />
<button onclick="createJson()">Save displayed data &amp; create JSON</button>
<br />
<div class="container">

</div>

CSS

table,
th,
td {
  border: 1px solid #ddd;
  border-collapse: collapse;
  padding: 10px;
}

table {
  margin: auto;
}

.parent {
  height: 25%;
  width: 90%;
  padding: 1%;
  margin-left: 1%;
  margin-top: 1%;
  border: 1px solid black;
}

.parent:nth-child(odd) {
  background: skyblue;
}

.parent:nth-child(even) {
  background: green;
}

JavaScript

function createTable() {
  $.getJSON("https://api.randomuser.me/?results=5", function(data) {
    // First, clear the table
    $('#datatable tr:has(td)').remove();
    data.results.forEach(function(record) {
      var json = JSON.stringify(record);
      $('#datatable').append(
        $('<tr>').append(
          $('<td>').append(
            $('<input>').attr('type', 'checkbox')
            .addClass('selectRow')
            .val(json)
          ),
          $('<td>').append(
            $('<a>').attr('href', record.picture.thumbnail)
            .addClass('imgurl')
            .attr('target', '_blank')
            .text(record.name.first)
          ),
          $('<td>').append(record.dob)
        )
      );
    })
  }).fail(function(error) {
    console.log("**********AJAX ERROR: " + error);
  });
}

function createJson() {
  var json = $(".container>div").map(function() {
    return $(this).data("obj")
  }).get()
  console.log(json)
  alert(JSON.stringify(json,4,4))
}

function saveData() {
  // Scrape the URLs that were already collected into a Set:
  var used = new Set($('.myLink').map(function() {
    return $(this).attr('href');
  }).get());
  var errors = [];
  $('input.selectRow:checked').each(function(count) {
    // Get the JSON that is stored as value for the checkbox
    var obj = JSON.parse($(this).val());
    // See if this URL was already collected (that's easy with Set)
    if (used.has(obj.weburl)) {
      errors.push(obj.title);
    } else {
      // Append it to the collection (use jQuery for appending)
      $('.container').append(
        $('<div>').data("obj", obj).addClass('parent').append(
          $('<label>').addClass('dataLabel').text('Name: '),
          obj.name.first + ' ' + obj.name.last,
          $('<br>'), // line-break between name & pic
          $('<img>').attr('src', obj.picture.thumbnail), $('<br>'),
          $('<label>').addClass('dataLabel').text('Date of birth: '),
          obj.dob, $('<br>'),
         ...