JSFiddle - React, Tailwind, and code Playground

by lwaters5

HTML

<?php require_once('Connections/sdpc_i.php'); ?>
<?php require_once('webassist/mysqli/rsobj.php'); ?>
<?php require_once('webassist/mysqli/queryobj.php'); ?>

<?php
if (isset($_POST["submit2"]) || isset($_POST["submit2_x"])) {
  $DeleteQuery = new WA_MySQLi_Query($sdpc_i);
  $DeleteQuery->Action = "delete";
  $DeleteQuery->Table = "subscription";
  $DeleteQuery->addFilter("subscriptionID", "=", "i", "".((isset($_POST["subscriptionID"]))?$_POST["subscriptionID"]:"")  ."");
  $DeleteQuery->execute();
  $DeleteGoTo = "new_requests_state.php?state=" . $_GET['state'] . "";
  if (function_exists("rel2abs")) $DeleteGoTo = $DeleteGoTo?rel2abs($DeleteGoTo,dirname(__FILE__)):"";
  $DeleteQuery->redirect($DeleteGoTo);
}
?>
<?php
$alliance = new WA_MySQLi_RS("alliance",$sdpc_i,1);
$alliance->setQuery("SELECT * FROM alliance WHERE state_abbreviation = ?");
$alliance->bindParam("s", "".$_GET['state']  ."", "-1"); //colname
$alliance->execute();
?>
<?php
$states = new WA_MySQLi_RS("states",$sdpc_i,0);
$states->setQuery("SELECT state, country FROM districts where state is not NULL and account_status='Approved' group by state ORDER BY `state` ASC");
$states->execute();?>
<?php
$agreements = new WA_MySQLi_RS("agreements",$sdpc_i,0);
$agreements->setQuery("SELECT * FROM agreement_types WHERE `state` = ? and category = 'Regular' and latest='Y' and public_agreement = 'Yes' and paid is NULL");
$agreements->bindParam("s", "".$_GET['state']  ."", "-1"); //colname
$agreements->execute();?>
<?php
$district_results_private = new WA_MySQLi_RS("district_results_private",$sdpc_i,0);
$district_results_private->setQuery("SELECT * from (SELECT districtID, softwareID, data.softwareID as code, data.dataID as data_final, progress, last_modified_date FROM data where statusID=6 or statusID = 9 or statusID=13) t1 inner join (SELECT districtID, district_name, organizationID, state, tec_member from districts where state = ?) t2 on (t1.districtID = t2.districtID) inner join (SELECT softwareID, companyID,...

CSS

<style type="text/css">
ul.nav li a, ul.nav li a:visited {
    color: #375d8b !important;
}

ul.nav li a:hover, ul.nav li a:active {
    color: #375d8b !important;
}

ul.nav li.active a {
    color: #375d8b !important;
}

p {
	
	font-family: "Open Sans", Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	
}

.footer-font {
	color: #FFF;
	font-family: "Open Sans", Helvetica, sans-serif;
	text-decoration:none;
	line-height:17px;
}
.footer_titles {
	color: #CCC;
	font-family: "Open Sans", Helvetica, sans-serif;
	font-size:12px;
	
}
	.nav { margin-bottom: 0;
	margin-top: 0;
	
	 }

.skip {
        position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
    }
    
    a.skip:active, 
    a.skip:focus, 
    a.skip:hover {
        left: 0; 
        top: 0;
        width: auto; 
        height: auto; 
        overflow: visible; 
    }
.table { 
color: #333; /* Lighten up font color */
font-family: Helvetica, Arial, sans-serif; /* Nicer font */
border-collapse: 
collapse; border-spacing: 0; 
}

img { border: 0; }

</style>
 <style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid #426ea0;
padding: 2px;
background-color: white;
visibility: hidden;
z-index: 100;
font-size:12px;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
 img { border: 0; }

</style>
<style type="text/css">
.table1 {color: #333; /* Lighten up font color */
font-family: Helvetica, Arial, sans-serif; /* Nicer font */
border-collapse: 
collapse; border-spacing: 0; 
}
.small_links {	font-size: 12px;
}
.nav1 {margin-bottom: 0;
	margin-top: 0;
}
img { border: 0; }

</style>

JavaScript

<script type="text/javascript" class="init">
$(document).ready(function() {
    var table =  $('#example').DataTable( {
stateSave: true,
        "order": [[ 1, "asc" ],[ 2, "asc" ]],
        "lengthMenu": [[25, 50, 1000, -1], [25, 50, 100, "All"]],
        lengthChange: false,
        buttons: [ 'excel', 'colvis']
    } );
   
    table.buttons().container()
        .appendTo( '#example_wrapper .col-md-6:eq(0)'
                    );
} );
  
    </script>
    
    
<script>
$(document).ready(function() {
$("form").submit(function (event) {
var data = table 
  .rows( function ( idx, data, node ) {
    return $(node).find('input[type="checkbox"][name="chkbx"]').prop('checked');
  } )
  .data()
  .pluck('id')
  .toArray();
  event.preventDefault()
}
$('#submit').on('click', function() {
$("#submit").attr("disabled", "disabled");
var dataID = $('#dataID').val();
var userID = $('#userID').val();
if(dataID!="" && userID!=""){
	$.ajax({
		url: "process2.php",
		type: "POST",
		data: {
			dataID: dataID,
			userID: userID,			
		},
		cache: false,
		success: function(dataResult){
			var dataResult = JSON.parse(dataResult);
			if(dataResult.statusCode==200){
				$("#butsave").removeAttr("disabled");
				$('#fupForm').find('input:text').val('');
				$("#success").show();
				$('#success').html('Data added successfully !'); 						
			}
			else if(dataResult.statusCode==201){
				alert("Error occured !");
			}
			
		}
	});
	}
	else{
		alert('Please fill all the field !');
	}
});
});
</script>