JSFiddle - React, Tailwind, and code Playground
HTML
<div id="headZone">
Template:
<select id="template"></select>
<input type="button" id="generateTpl" value="Go" />
</div>
<div id="editZone" style="background-color:#ccc;">salut</div>
<div id="previewZone">final</div>
CSS
#editZone input, #editZone textarea, #editZone select{
border:0px;
}
#editZone .dependant {
background-color:#CCC;
border-bottom:1px solid #333;
}
#editZone .original {
background-color:#FFF;
border-bottom:1px solid #300;
}
JavaScript
var arrTemplate = new Array();
var undef;
var tplVar = new Array(); //Variable table
var tplVarCount = new Array(); //Variable field counter
var src = "\n"
+ "\nImpaired Driving - ${soc_first_name} ${soc}"
+ "\nColumbia Valley RCMP"
+ "\n${officer} ${hrmis}"
+ "\nDate: ${month} ${day}, ${year}."
+ "\nFile ${year}-${file}"
+ "\n"
+ "\nNarrative:"
+ "\n"
+ "\nOn ${month} ${day}, ${year}, at ${time01}hrs, ${officer} was on duty in uniform driving a"
+ "\n"
+ "\nmarked police car in the Provincial District of Invermere, BC."
+ "\n${narrative|textarea}"
+ "\n"
+ "\n"
+ "\n"
+ "\n[asd]"
+ "\nAt ${time02}hrs, ${officer} formed reasonable suspicion that ${soc} consumed liquor because;"
+ "\n${suspicion|textarea=- }"
+ "\n"
+ "\nAt ${time02}hrs, ${officer} read ${soc} the ASD demand."
+ "\n"
+ "\n${officer} again asked ${soc} if he had any alcohol to drink. ${soc} said ${said_drink_01}."
+ "\n"
+ "\n${officer} waited ${wait} minutes because ${wait_reason}."
+ "\n"
+ "\nAt ${time03}hrs, ${soc} provided a ASD sample which read a \"Fail\". ${officer} formed"
+ "\n"
+ "\nreasonable grounds that ${soc} was impaired because;"
+ "\n${grounds|textarea=- }"
+ "\n- ${soc} blew a \"Fail\" reading on the ASD."
+ "\n[/asd]"
+ "\n"
+ "\nAt ${time04}hrs, ${officer} formed the opinion that ${soc}'s ability to operate a motor"
+ "\n"
+ "\nvehicle was impaired by alcohol."
+ "\n"
+ "\n${officer} detained ${soc} for impaired driving. ${officer} handcuffed, searched and placed"
+ "\n"
+ "\n${soc} in the back of the police vehicle."
+ "\n"
+ "\nAt ${time05}hrs, ${officer} read the breath demand. ${soc} said that he understood."
+ "\n"
...