JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <script src="js/jquery1.9.1.js"></script>
        <script src="js/main.js"></script>
		<script src="js/apprise-1.5.full.js"></script>
		<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
        <link href="css/main.css" type="text/css" rel="stylesheet" >
		<link rel="stylesheet" href="css/apprise.css" type="text/css" />
		
    </head>
    <body>
    <div id="pane">
        <div id="question">
            <ul>
               <li id="modem_offline">Modem offline</li>
               <li id="wireless">Wireless Issue?</li>
            </ul>
        </div>
		<div id=toolsarea>
			<div id="copy"> Copy </div> <div id="selectall"> Select All </div> <div id="clear">Clear </div>
		</div>
		<br>
        <textarea id="textarea" rows=20 cols=80></textarea>
	</div>
 </body>

CSS

// main.css
#pane {
   float: left;
   width: 100%; 
}
#question, #report {
    float: left;
    width: 40%;
    height: 330px;
    background-color: #DDD;
    margin: 5px;
}



#copy, #selectall, #clear {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	float: left;
	margin-top: 10px;
	text-align:center;
    background-color: #DDD;
    margin: 4px;
	font-style:oblique;
	letter-spacing:8px;
}

#toolsarea {
	border: none;
	margin-top: 2px;
	border-color: Transparent; 

}
#textarea:focus, input:focus{
    outline: none;
}
#textarea {
	padding: 15px;
	border: 0px;
    float: left;
    width: 48%;
    height: 300px;
    background-color: #DDD;
    margin: 5px;
}

#question li {
    cursor: pointer;
}

// apprise.ss

.appriseOverlay
	{
	position:fixed;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.3);
	display:none;
	}
.appriseOuter
	{
	background:#eee;
	border:1px solid #fff;
	box-shadow:0px 3px 7px #333;
	-moz-box-shadow:0px 3px 7px #333;
	-webkit-box-shadow:0px 3px 7px #333;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	-khtml-border-radius:4px;
	position:absolute;
	z-index:99999999;
	min-width:200px;
	min-height:50px;
	max-width:75%;
	position:fixed;
	display:none;
	}
.appriseInner
	{
	padding:20px;
	color:#333;
	text-shadow:0px 1px 0px #fff;
	}
.appriseInner button
	{
	border:1px solid #bbb;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-khtml-border-radius:3px;
	background: -moz-linear-gradient(100% 100% 90deg, #eee, #d5d5d5);
  	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#d5d5d5));
  	background: -webkit-linear-gradient(#eee, #d5d5d5);
    background: -o-linear-gradient(#eee, #d5d5d5);
	color:#232d3d;
	font-size:12px;
	font-weight:bold;
	padding:4px 10px;
	margin:0 3px;
	text-shadow:0px 1px 0px #fff;
	cursor:pointer;
	box-shadow:0px 1px 2px #ccc;
	-moz-box-shadow:0px 1px 2px #ccc;
	-webkit-box-shadow:0px 1px 2px #ccc;
	}
.appriseInner...

JavaScript

// Copy button
$(document).ready(function() {
	$('#copy').click(function() {
	
	
	
		$('#copy').zclip({
			path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
			copy:$('#textarea').text()
		});
		 
	})
})


// Select all button
$(document).ready(function() {
	$('#selectall').click(function() {
		  $("#textarea").select();
	})
})


// Clear button
$(document).ready(function() {
	$('#clear').click(function() {		
	    $('#textarea').val('');
	});
});	
	

// Declined TC [start]
function no_ts() {
var txt = $("textarea");
apprise('Trouble-Call exceptions:', {'verify':true, 'textYes':'Refer to local office!', 'textNo':'Customer will callback for reschedule'}, function(r) {
		if(r) { txt.val( txt.val() + '\nReferred customer to local office'); }
		 else { txt.val( txt.val() + '\nCustomer will callback to reschedule');; }
	})
}
// Declined TC [ e n d ]




// Modem offline TS (NO OUTAGE) [start]
function offline_ts() {
	var txt = $("textarea");
	apprise('Physical connection checked?', {'animate':true}, function(r) {
					if(r) { txt.val( txt.val() + '\nPhysical connection checked'); }
					
							
							apprise('Reset modem procedure: Hit YES if done. ', {'animate':true}, function(r) {
								if(r) { txt.val( txt.val() + '\nModem reset done');; }
							// [removed]		else { $("#report #rlist").append('<li> ONS TR#: N/A </li>'); }
							
									apprise('Proceed trouble call? ', {'confirm':true}, function(r) {
										if(r) { txt.val( txt.val() + '\nTruck Roll created'); }
											else { 
											
													// $("#report #rlist").append('<li> TS Declined </li>');
													txt.val( txt.val() + '\nTruck Roll Declined');
													$(document).ready(function() { no_ts(); }); 
													return false;
											
											
											}
											
											
											apprise('Make sure to educate cx about pre-call policy. ', {'animate':true}, function(r) {
												if(r) { txt.val( txt.val() + '\nPre-call policy provided');...