JSFiddle - React, Tailwind, and code Playground

by Ranjith

HTML

<html>

<head></head>

<body>

  <script>

    /*

     * Code by Ranjith - http://www.alightheartedtalk.com

     * Do not remove attribution

     */

    var categoryNames = ["Cat 1", "Cat 2", "Cat 3"]; // names of categories

    var categoryLabels = ["cl1", "cl2", "cl3"]; // labels of categories

    var subcategoryCount = [2, 2, 3]; // number of subcategories in each category

    var subcategoryNames = ["Cat 1-1", "Cat 1-2", "Cat 2-1", "Cat 2-2", "Cat 3-1", "Cat 3-2", "Cat 3-3"]; // names of subcategories

    var subcategoryLabels = ["cl1-1", "cl1-2", "cl2-1", "cl2-2", "cl3-1", "cl3-2", "cl3-3"]; // labels of subcategories

    var subcategoryBeginsAt = new Array();

    var sum = 0;

    for (var i = 0; i < subcategoryCount.length; i++) {

      subcategoryBeginsAt[i] = sum;

      sum = sum + subcategoryCount[i];

    }

    document.write("<form >");

    document.write("<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"2\">");

    for (var i = 0; i < categoryNames.length; i++) {

      document.write("<tr><td width=\"27\" valign=\"top\">                                         <input id=\"c" + i + "\" type=\"checkbox\" ></td>");

      document.write("<td valign=\"top\">" + categoryNames[i]);

      document.write("<table border=\"0\" width=\"100%\" cellspacing=\"0\">");

      for (var j = 0; j < subcategoryCount[i]; j++) {

        document.write("<tr><td width=\"27\" ><input id=\"c" + i + "-" + j + "\"type=\"checkbox\" >");

        document.write("</td><td>" + subcategoryNames[subcategoryBeginsAt[i] + j] + "</td></tr>");

      }

      document.write("</table>");

      document.write("</td></tr>");

    }

    document.write("</table>");

    document.write("<p><input type=\"button\" onclick=\"s()\" value=\"Submit\" ></form>");

    for (var i = 0; i < categoryNames.length; i++) {

      document.getElementById("c" + i).onclick = function () {

        var checked = window.event.srcElement.checked;

        var checkboxI;

    ...