JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<h1>MLB Register Dump Analysis Tool</h1>
<p>Put mouse over input fields to get more information</p>
<!--
        <input id="trace" class="link" title="paste link for trace" placeholder="http:/link_to_file.txt" value="" size="50"/>
        <button id="analyze">analyze</button>
        -->
<div id="view"></div>
<button id="dump">Go</button>

<div id="out"></div>

CSS

.text {}

p {
  margin: 0;
}

button {
  border: none;
  display: inline-block;
  outline: 0;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: #fff !important;
  background-color: #009688 !important;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: button;
  margin: 5px;
  box-shadow: 2px 2px 2px 2px #aaa;
}

#out {
  /* width : 80%; */
  /* height : 70%; */
  border: inset 1px #111;
  color: black;
  box-shadow: 2px 2px 5px #111;
  padding: 5px;
}

.entries_title {
  background: rgba(0, 209, 216, 0.32);
  border: 1px solid #111;
  padding-left: 2px;
}

.entries {
  padding: 5px;
  border: solid 1px #555;
}

.entry {
  border: 1px solid #bbb;
  /* box-shadow: inset 0px 0px 15px 4px #999; */
  padding: 1px 5px 5px 5px;
}

.entry p {
  margin-left: 10px;
}

.entries {
  margin: 10px;
}

.title {
  margin: 10px 0px;
  /* padding: 0px; */
}

JavaScript

$(function() {
  var view;

  $.when($.ready).then(function() {
    // Document is ready.
    view = $("#view");
    var input = $('<input class="in" title="paste 128bit hex value here" placeholder="1111 2222 3333 4444 5555 6666 7777 8888" value="" size="38"/>');

    input.clone().attr("id", "cdt").attr("name", "CDT").val("0000007F 0001000A 0000000A 00001001").appendTo(view).before('<br/><div class="text">CDT</div>');
    input.clone().attr("id", "adt").attr("name", "ADT").val("1ADE0080 1ADE0000 107F107F 0603C000").appendTo(view).before('<br/><div class="text">ADT</div>');


    var input2 = $('<input class="in" title="paste 16bit hex value here" placeholder="1111" value="" size="8"/>');
    input2.clone().attr("id", "catmlb").attr("name", "CAT_MLB").val("1902").appendTo(view).before('<br/><div class="text">CAT MLB</div>');
    input2.clone().attr("id", "cathbi").attr("name", "CAT_HBI").val("0902").appendTo(view).before('<br/><div class="text">CAT HBI</div>');

    $("#dump").mouseup(function() {
      $("#out").empty();
      var file = "./mlb_dump.json";
      //$.getJSON(file, function(json) {
      var json = table_entries;
      var channeltype = dump_cat($("#catmlb")[0], json.cat_entry, true);
      dump_cat($("#cathbi")[0], json.cat_entry, false);
      dump_dt($("#cdt")[0], channeltype, json.cdt_entry);
      dump_dt($("#adt")[0], channeltype, json.adt_entry);
      console.log(json);
      //}).fail(function(jqxhr, textStatus, error) {
      //  var err = file + ": " + textStatus + ", " + error.message;
      //  console.log( "Request Failed: " + err );
      // });

    });


  });



  function dump_dt(dt, channeltype, json) {
    var out_str = $("#out");

    var entries = $('<div class="entries"><div class="entries_title">' + dt.name + " ( type: " + channeltype + " )<br/>" + dt.value + "</div></div>").appendTo(out_str);

    for (var page = 0; page < json.pages; page++) {

      var hex_value = toHex(dt.value, page);
      entry = $('<div...