JSFiddle - React, Tailwind, and code Playground

by Chris Hughes

HTML

<html>

  <head>

    <!-- Linking Scripts and Files -->

    <!--jQuery-->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <!-- FancyBox -->
    <link rel="stylesheet" href="resource/FancyBox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script type="text/javascript" src="resource/FancyBox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
    <link rel="stylesheet" href="resource/FancyBox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
    <script type="text/javascript" src="resource/FancyBox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <script type="text/javascript" src="resource/FancyBox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>


    <!--Stylesheet-->
    <link rel="stylesheet" type="text/css" href="style3.css" />

 

    <meta charset="utf-8">

  </head>

  <body>
  
     <!--JavaScript Files-->
    <script src="script/sorttable.js"></script>
    <script src="qc_page.js"></script>
    <script src="http://listjs.com/no-cdn/list.js"></script>
  

    <h1> DEOS Quality Control Website </h1>

    <!--Displaying the Calendar-->
    <div id="calendar">
      Date:
      <input type="text" id="datepicker">
      </div>   

    <script>
     // Selecting a date from the Calendar
      var $datepicker = $("#datepicker").datepicker({
        dateFormat: 'dd-M-yy'
      });
      $datepicker.datepicker();
      var date_Selection = $datepicker[0].value;

      document.getElementById("datepicker").onchange = function() {

        var date_Selection = $datepicker[0].value;
        window.location.href = "index_test6.php?date_Selection=" + date_Selection;
      }
      </script>
   


    <!--External Links-->
    <div id="External_Links">
      External Links: &nbsp
      <a...

JavaScript

function full_submit() {
        var inputs = document.getElementsByTagName("input");
        //for(var i = 0; i < inputs.length; i++) {
        for (var i = inputs.length - 1; i > -1; i--) {
          if (inputs[i]) {
            if (inputs[i].type == "checkbox" && ((inputs[i].id == "good") || (inputs[i].id == "maybe") || (inputs[i].id == "bad"))) {
              if (inputs[i].checked == true) {
                var table = document.getElementById("qc_table");
                var row_to_delete = Math.floor((i - 4) / 4);
                var row = table.rows[row_to_delete];
                var chkbox = row.cells[5].childNodes[0];
                var manualFlag = "";
                if (null != chkbox && true == chkbox.checked) {
                  manualFlag = "Good";
                }
                var chkbox2 = row.cells[6].childNodes[0];
                if (null != chkbox2 && true == chkbox2.checked) {
                  manualFlag = "Maybe";
                }
                var chkbox3 = row.cells[7].childNodes[0];
                if (null != chkbox3 && true == chkbox3.checked) {
                  manualFlag = "Bad";
                }
                var the_comment = row.cells[8].childNodes[0].value;
                var Station_Id = document.getElementById("qc_table").rows[row_to_delete].cells[10].innerHTML;
                var Data_Type_Id = document.getElementById("qc_table").rows[row_to_delete].cells[11].innerHTML;
                var Station_Time_Id = document.getElementById("qc_table").rows[row_to_delete].cells[12].innerHTML;

                $.ajax({
                  type: "GET",
                  url: "test_db_change.php?Station_Id=" + Station_Id + "&Data_Type_Id=" + Data_Type_Id + "&Station_Time_Id=" + Station_Time_Id + "&manualFlag=" + manualFlag + "&the_comment=" + the_comment,
                  dataType: "json",
                  data: 'id=testdata',
                  async: false,
                  success: function(result2) {
                   ...