JSFiddle - React, Tailwind, and code Playground

by jmcausing

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>
        <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">
            <ol>
               <li id="modem_offline">Modem offline</li>
               <li id="wireless">Wireless Issue?</li>
            </ol>
        </div>
        <div id="report">
            <ul id="rlist"></ul>
                
        </div>
    </div>
	
    </body>

CSS

#pane {
   float: left;
   width: 100%; 
}
#question, #report {
    float: left;
    width: 48%;
    height: 300px;
    background-color: #DDD;
    margin: 5px;
}
#question li {
    cursor: pointer;
}

JavaScript

$(document).ready(function() {
  $("#question li").click(function(){
		var question=$(this).html();
		var question_id = $(this).attr('id');
		apprise($(this).html(), {'verify':true}, function(r) {
			if(r) { 
				$("#report #rlist").append('<li>'+ question + ' -> YES</li>');
				if(question_id == 'modem_offline') {
				
					apprise('Is there an outage in ONS or Unified?', {'verify':true}, function(r) {
						if(r) { 
							
							
							alert('dapat ma input cya how many modems online or offline');
							
							
							
							
							
							
							
							
							}
						else { $("#report #rlist").append('<li> - this is question num 1 -> NO</li>'); }
						
						apprise('this is question num 2', {'verify':true}, function(r) {
						  if(r) { $("#report #rlist").append('<li> - this is question num 2 -> YES</li>'); }
						  else { $("#report #rlist").append('<li> - this is question num 2 -> NO</li>'); }
						  
							apprise('this is question num 3', {'verify':true}, function(r) {
								if(r) { $("#report #rlist").append('<li> - this is question num 3 -> YES</li>'); }
								else { $("#report #rlist").append('<li> - this is question num 3 -> NO</li>'); }
							});

						});
					
					});

					

					


					}
			} else {
				$("#report #rlist").append('<li>'+ question + ' -> NO</li>');		
			}
		});
   });
});