JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<p>BY CATEGORY</p>
<p><a href="javascript:void(0);" onclick="jqxml.query('category=\'cakes\'');">Get Cakes</a></p>
<p><a href="javascript:void(0);" onclick="jqxml.query('category=\'puddings\'');">Get Puddings</a></p>
<p>BY NAME</p>
<p><a href="javascript:void(0);" onclick="jqxml.query('name=\'Chocolate Cake\'');">Get Chocolate Cake</a></p>
<p><a href="javascript:void(0);" onclick="jqxml.query('name=\'Vanilla Pudding\'');">Get Vanilla Pudding</a></p>
<p>BY ID</p>
<p><a href="javascript:void(0);" onclick="jqxml.query('id=\'2\'');">Get ID 2</a></p>
<p><a href="javascript:void(0);" onclick="jqxml.query('id=\'3\'');">Get ID 3</a></p>
<div id="pageoutput"></div>

CSS

body {
	background-color: #630;
	margin: 50px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFF;
}
a {
	color: #FC0;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	color: #C90;
}
p {
	color: #CCC;
}

JavaScript

var xml_data_schema='<?xml version="1.0" encoding="UTF-8"?><screens><screen id="1" name="Chocolate Cake" category="cakes"><screen_text>Chocolate cake is made with chocolate; it can be made with other ingredients, as well. These ingredients include fudge, vanilla creme, and other sweeteners. The history of chocolate cake goes back to 1764, when Dr. James Baker discovered how to make chocolate by grinding cocoa beans between two massive circular millstones.</screen_text></screen><screen id="2" name="Lemon Cake" category="cakes"><screen_text>Lemon cakes are a kind of sweet baked dessert, made using lemons. They are typically served as small cakes, held and eaten with one hand (as opposed to a larger cake requiring utensils). Lemon cakes are relatively expensive treats enjoyed by upper-class noblewomen of the Seven Kingdoms, where they are a mainstay at the refined social gatherings of noble courts.</screen_text></screen><screen id="3" name="Chocolate Pudding" category="puddings"><screen_text>The U.S./Canada and Asian version is one of the most common varieties of sweet or dessert pudding served in these countries. It is usually eaten as a snack or dessert. It is also used as a filling for chocolate pie.</screen_text></screen><screen id="4" name="Vanilla Pudding" category="puddings"><screen_text>The modern usage of the word pudding to denote primarily desserts has evolved over time from the almost exclusive use of the term to describe savoury dishes, specifically those created using a process similar to sausages where meat and other ingredients in a mostly liquid form are encased and then steamed or boiled to set the contents. The most famous examples still surviving are blood sausage, which was a favourite of King Henry VIII, and haggis.</screen_text></screen></screens>';

var JQXML = function(xml){

     this.schema = xml;
     this.data = null;
     
     this.schema_tag = 'screen';
     this.schema_content_tag = 'screen_text';
     this.output_selector =...