JSFiddle - React, Tailwind, and code Playground

HTML

<input id='stringProof' value='a@a1#b@b1#c@c1#d@d1'/>
<table id='proofTable'/>

JavaScript

// the string of format
var stringProof = document.getElementById("stringProof").value;
var arrayOfProof = stringProof.split("#");

// find the table
var table = document.getElementById("proofTable");
// remove what's within
table.innerHTML = "";
var currentIndex = 0;
var end = 4;

for(var i = currentIndex*4;i < end;i++)
{
    // iterative create the text, span, cell and row
    var currentStepProof = arrayOfProof[i];
    var elementsInCurrentStepProof = currentStepProof.split("@");

    var tr = document.createElement("tr");
    var td = document.createElement("td");

    var span = document.createElement("span");
    span.data = elementsInCurrentStepProof[1];
    span.onmouseover = function(event) {alert(event.target.data);};
    var text = document.createTextNode(elementsInCurrentStepProof[0]);
    span.appendChild(text);
    td.appendChild(span);
    tr.appendChild(td);
    table.appendChild(tr);
}