JSFiddle - React, Tailwind, and code Playground

by manoj jasti

JavaScript

var nodeHtml = "", // create html node 
        groupHeading = "OffSite - Start Of Day",
         groupName = "OffSite",
        version_num = 1;
        // check whether there are any values in the JSon
        if (data.page_data[0][version_num][groupName].length > 0) {

            for (var i = 0; i < data.page_data[0][version_num][groupName].length; i++) {
                var formNum = i + 2;
                nodeHtml += "<div class='containerGrid-content container-fullWidth' style='-ms-grid-row: 1; -ms-grid-column: " + formNum + ";'>";
                nodeHtml += "<div class='containerGrid-content-inner'>";
                nodeHtml += "<form id='containerGrid-content-inner-form-" + formNum + "' onsubmit='return false;' data-container-content-index='" + (i + 1) + "'>";

                // group heading 
                nodeHtml += "<div class='groupHeadingDiv' style='-ms-grid-row: 1; -ms-grid-column:" + (formNum * 2) + ";'>";
                nodeHtml += "<span class='groupHeadingLabel' >" + groupHeading + "</span>";
                nodeHtml += "<span class='form-validation-status'>";
                nodeHtml += "<span class='form-validation-status-invalid'><span class='form-validation-status-icon invalid'>&#xE108;</span></span>";
                nodeHtml += "<span class='form-validation-status-valid'><span class='form-validation-status-icon valid'>&#xE10B;</span></span>";
                nodeHtml += "</span></div>";

                // S/ I/ N/A Radio Label 
                nodeHtml += "<div class='radioLabelDiv' style='-ms-grid-row: 2; -ms-grid-column: " + (formNum * 2) + ";'>";
                nodeHtml += "<span title='Satisfactory, Tap to Select All.' class='radioLabel radioLabelBtn' style=''>S</span>";
                nodeHtml += "<span title='Incomplete' class='radioLabel' style=''>I</span>";
                nodeHtml += "<span title='Not Applicable, Tap to Select All.' class='radioLabel radioLabelBtn' style=''>N/A</span>";
                nodeHtml +=...