JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <div class="widget">
      <h2 class="title" id="mattruma_title"></h2>
      <h3>Star Trek</h3>
      <ul id="mattruma_links_a">        
        <li id="mattruma_links_a_loading">Loading...</li>
      </ul>
      <h3>Star Wars</h3>
      <ul id="mattruma_links_b">
        <li id="mattruma_links_b_loading">Loading...</li>
      </ul>
    </div>
  </body>
</html>

JavaScript

document.getElementById("mattruma_title").innerHTML = "Science Fiction Characters";

fetch("https://www.mocky.io/v2/5da5f217340000ef27632e26")
  .then((resp) => resp.json())
  .then(function (data) {
    let ul = document.getElementById("mattruma_links_a");
    let items = data;
    return items.map(function (item) {
      let li = createNode("li");
      li.innerHTML = item.name;
      append(ul, li);
    })
  })
  .then(function() {
  	document.getElementById("mattruma_links_a_loading").remove();
	})
  .then(function () {
    fetch("https://www.mocky.io/v2/5da605ea340000d325632e85")
      .then((resp) => resp.json())
      .then(function (data) {
      let ul = document.getElementById("mattruma_links_b");
      let items = data;
      return items.map(function (item) {
        let li = createNode("li");
        li.innerHTML = item.name;
        append(ul, li);
      })
    })
    .then(function() {
    	document.getElementById("mattruma_links_b_loading").remove();
		})
})                 

function createNode(element) {
  return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}