JSFiddle - React, Tailwind, and code Playground

by Edbert

HTML

<div id="j1979"></div>
<!--<div id="j19792"></div>-->

CSS

#moreinfo {
    display: none;
}
#j1979 {
    color: blue;
}

/*#j19792 {
    color: red;
    border: 1px solid green;
}*/

JavaScript

$(document).ready(function () {
    var PID = "testPID";
    var name = "Random Name";
    var source = "Google";
    var doffset = "1000";
    var type = "A-9001";
    var length = "50CM";
    var scale = "100";
    var noffset = "0";
    var units = "Some Units";

    var moreinfo = "<div id='moreinfo'>source: " + source + "</br>" + "doffset: " + doffset + "</br>" + "type: " + type + "</br>" + "length: " + length + "</br>" + "scale: " + scale + "</br>" + "noffset: " + noffset + "</br>" + "units: " + units + "</div>";

    document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";

    document.getElementById("j1979").innerHTML += moreinfo;
    
    
    /*var moreinfo = "<div id='moreinfo2'>source: " + source + "</br>" + "doffset: " + doffset + "</br>" + "type: " + type + "</br>" + "length: " + length + "</br>" + "scale: " + scale + "</br>" + "noffset: " + noffset + "</br>" + "units: " + units + "</div>";
    
    document.getElementById("j19792").innerHTML += "<p onclick=\"document.getElementById('moreinfo2').style.display = 'inline-block';\">" + PID + "</p>";

    document.getElementById("j19792").innerHTML += moreinfo2;*/
});