JSFiddle - React, Tailwind, and code Playground

HTML

<p id="title">
  This title will be replaced...
</p>
<button id="btn1">
  First list
</button>
<button id="btn2">
  Second list
</button>
<table id="table">
  <thead>
    <th>Col 1</th>
    <th>Col 2</th>
  </thead>
  <tbody>
  </tbody>
</table>

JavaScript

var btn1 = $("#btn1");
var btn2 = $("#btn2");

$(document).ready(function() {
  btn1.on("click", function() {
    displayDefaultList();
  });
  btn2.on("click", function() {
    displaySecondList();
  });
});

function displayDefaultList() {
  console.log("display default list table");
  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/echo/json/',
    async: false,
    data: {
      json: JSON.stringify({
        row: [1, 2]
      })
    },
    success: function(result) {
      $('#title').text('first list');
    	$('#table tbody').remove();
      var newRow = '<tbody><tr><td>' + result.row[0] + '</td></tr><tr><td>' + result.row[1] + '</td></tr></tbody>';
      $('#table').append(newRow);
    }
  });
}

function displaySecondList() {
  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/echo/json/',
    async: false,
    data: {
      json: JSON.stringify({
        'row': [3, 4]
      })
    },
    success: function(result) {
      $('#title').text('second list');
    	$('#table tbody').remove();
      var newRow = '<tbody><tr><td>' + result.row[0] + '</td></tr><tr><td>' + result.row[1] + '</td></tr></tbody>';
      $('#table').append(newRow);
    }
  });
}