JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<form>
<input type="button" onclick="insRow()" value="Insert row">
<input type="button" value="Delete" onclick="deleteRow()"><br><Br>
<table id="myTable" border="1">
</table>
</form>
    
    
    
<img id="qrcode" alt="QR Code" />
<script type="text/javascript">// <![CDATA[
function generate(content)
{
  var url = "http://www.esponce.com/api/v3/generate?content=" + encodeURI(content) + "&#038;format=png";
  var img = document.getElementById("qrcode");
  img.src = url;
}
generate("<?$info='test'; echo $info;?>");
// ]]>
</script>
</html>

CSS

table {
	border: 1px outset;
}
td {
	border: 1px inset;
}

JavaScript

var i = 0;
function insRow(){
	i++;
	var x=document.getElementById('myTable').insertRow(-1)
	var a=x.insertCell(0)
	var b=x.insertCell(1)
	var c=x.insertCell(2)
	var d=x.insertCell(3)
	var e=x.insertCell(4)
	a.innerHTML="<input type='hidden' name='newtracknumber["+(i)+"]' id='newtracknumber[i]' value='0i' size='5'>0" + i;
	b.innerHTML="<input class='listitem' type='text' name='newtrack[$i]' id='newtrack[i]' size='25' value='$newtrack[i]["+(i)+"]'>"
	c.innerHTML="<select class='listitem'><option value='Opel'>Opel</option><option value='Audi'>Audi</option></select>"
	d.innerHTML="<textarea class='listitem' name='newlyrics[$i]' id='newlyrics[$i]' cols='35'>$newlyrics[$i]</textarea>"
        e.innerHTML="<input type='button' value='Delete' onclick='deleteTrow(this)'>"
}

function deleteRow(){
	i--;
	document.getElementById('myTable').deleteRow(-1);
}

function deleteTrow(r)
{
var dtr = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(dtr);
}


var i = 2;
$(".listItem").each(function() {
     $(this).attr("id", i++);
});

function generate(content)
{
  var url = "http://www.esponce.com/api/v3/generate?content=" + encodeURI(content) + "&#038;format=png";
  var img = document.getElementById("qrcode");
  img.src = url;
}
generate(<? echo 'text';?>");